From 02235fe998b07e879e8abcaef74e20f7517d43af Mon Sep 17 00:00:00 2001
From: erKam <88717125+erkamyaman@users.noreply.github.com>
Date: Sun, 11 Oct 2026 00:46:24 +0300
Subject: [PATCH] fix(http): edit the TransferState script, not one whose
 data-id ends in -state

State-edit overrides find Angular's `<script id="{appId}-state">` with a
regex that used `\bid=`. A word boundary also sits between `-` and `id`,
so `data-id="config-state"` matched too, and when such a JSON script came
first the edit landed in the wrong script while Angular's state stayed the
same. The browser side already uses `script[id$="-state"]`. The regex now
needs whitespace before `id`, both where the edit is applied and where the
middleware checks for a state script.
---
 packages/devtools/src/__tests__/ssr-overrides.test.ts | 10 ++++++++++
 packages/devtools/src/ssr-middleware.ts               |  2 +-
 packages/devtools/src/ssr-overrides.ts                |  3 ++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/devtools/src/__tests__/ssr-overrides.test.ts b/packages/devtools/src/__tests__/ssr-overrides.test.ts
index 72361f9a..28e47dc0 100644
--- a/packages/devtools/src/__tests__/ssr-overrides.test.ts
+++ b/packages/devtools/src/__tests__/ssr-overrides.test.ts
@@ -129,6 +129,16 @@ describe('editTransferState', () => {
     expect(({} as Record<string, unknown>)['polluted']).toBeUndefined();
   });
 
+  it('edits the TransferState script, not a script with a data-id ending in -state', () => {
+    const other = '<script type="application/json" data-id="config-state">{"a":0}</script>';
+    const out = editTransferState(other + STATE_HTML, [
+      override({ kind: 'state-edit', key: 'a', value: '2' }),
+    ])!;
+    expect(out.html).toContain(other);
+    const json = /<script id="ng-state"[^>]*>([\s\S]*?)<\/script>/.exec(out.html)![1];
+    expect(JSON.parse(json)).toEqual({ a: 2, keep: 2 });
+  });
+
   it('returns null with no state script or nothing to change', () => {
     const edit = override({ kind: 'state-edit', key: 'missing' });
     expect(editTransferState('<html></html>', [edit])).toBeNull();
diff --git a/packages/devtools/src/ssr-middleware.ts b/packages/devtools/src/ssr-middleware.ts
index 2ee3abd8..be8ef1aa 100644
--- a/packages/devtools/src/ssr-middleware.ts
+++ b/packages/devtools/src/ssr-middleware.ts
@@ -176,7 +176,7 @@ export function createSsrMiddleware(options: SsrMiddlewareOptions = {}) {
         }
         const html = Buffer.concat(chunks).toString('utf8');
         const isHtml = /\btext\/html\b/.test(headerText(res.getHeader('content-type')) ?? '');
-        const hasState = isHtml && /<script\b[^>]*\bid="[^"]*-state"/.test(html);
+        const hasState = isHtml && /<script\b[^>]*\sid="[^"]*-state"/.test(html);
         const edited = hasState ? editTransferState(html, list) : null;
         // Error pages and redirects carry no TransferState, so an edit there is not worth a note.
         for (const o of hasState ? list : []) {
diff --git a/packages/devtools/src/ssr-overrides.ts b/packages/devtools/src/ssr-overrides.ts
index b39aab76..c9a14516 100644
--- a/packages/devtools/src/ssr-overrides.ts
+++ b/packages/devtools/src/ssr-overrides.ts
@@ -92,8 +92,9 @@ export function editTransferState(
 ): { html: string; keys: string[] } | null {
   if (!edits.length) return null;
   // Angular writes `<script id="{appId}-state" type="application/json">`; attribute order can vary.
+  // `\sid=` so an attribute such as `data-id` does not count as the id.
   const script =
-    /(<script\b(?=[^>]*\bid="[^"]*-state")(?=[^>]*type="application\/json")[^>]*>)([\s\S]*?)(<\/script>)/.exec(
+    /(<script\b(?=[^>]*\sid="[^"]*-state")(?=[^>]*type="application\/json")[^>]*>)([\s\S]*?)(<\/script>)/.exec(
       html,
     );
   if (!script) return null;