fix(platform-server): insert transfer state script before other script tags (#48868)

alan-agius4 · dylhunn · commit 2fc5b70fcedb · 2023-01-30T16:54:07.000-08:00
Previously, the state `script` was always appended as the last item in the `body` tag. This can result in the state not being available when the Angular application is bootstrap. A workaround for this was to delay the bootstrapping of the application until by using the `DOMContentLoaded` event listener. ```ts const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); document.addEventListener('DOMContentLoaded', bootstrap); ``` With this change the above workaround is no longer necessary as the state `script` tag is now added prior of any other `script` which guarantees that the state is present prior of the Angular application is bootstrapped. PR Close #48868
diff --git a/packages/platform-server/src/transfer_state.ts b/packages/platform-server/src/transfer_state.ts
@@ -35,7 +35,14 @@ function serializeTransferStateFactory(doc: Document, appId: string, transferSto
     script.id = appId + '-state';
     script.setAttribute('type', 'application/json');
     script.textContent = escapeHtml(content);
-    doc.body.appendChild(script);
+    const existingScript = doc.body.querySelector('script');
+    if (existingScript) {
+      // Insert the state script before any script so that the the script is available
+      // before Angular is bootstrapped as otherwise this can causes the state not to be present.
+      existingScript.before(script);
+    } else {
+      doc.body.appendChild(script);
+    }
   };
 }
 
diff --git a/packages/platform-server/test/transfer_state_spec.ts b/packages/platform-server/test/transfer_state_spec.ts
@@ -83,4 +83,36 @@ describe('transfer_state', () => {
     const output = await renderModule(TransferStoreModule, {document: '<app></app>'});
     expect(output).toBe(defaultExpectedOutput);
   });
+
+  it('adds transfer script tag before any existing script tags', async () => {
+    const STATE_KEY = makeStateKey<number>('test');
+
+    @Component({selector: 'app', template: 'Works!'})
+    class TransferComponent {
+      constructor(private transferStore: TransferState) {
+        this.transferStore.onSerialize(STATE_KEY, () => 10);
+      }
+    }
+
+    @NgModule({
+      bootstrap: [TransferComponent],
+      declarations: [TransferComponent],
+      imports: [BrowserModule.withServerTransition({appId: 'transfer'}), ServerModule],
+    })
+    class TransferStoreModule {
+    }
+
+    const output = await renderModule(TransferStoreModule, {
+      document: '<app></app><script src="polyfills.js"></script><script src="main.js"></script>'
+    });
+    expect(output).toContain(
+        '<body>' +
+        '<app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">Works!</app>' +
+        '<script id="transfer-state" type="application/json">' +
+        '{&q;test&q;:10}' +
+        '</script>' +
+        '<script src="polyfills.js"></script>' +
+        '<script src="main.js"></script>' +
+        '</body>');
+  });
 });
