fix(@schematics/angular): wrap bootstrapping code in an HMR compatibl…

…e manner

With this change we update the universal schematic bootstrap code to handle HMR properly. Previously, the bootstrapping code was called only on `DOMContentLoaded` which is not triggered when running in HMR.

Closes #21932

(cherry picked from commit 08687d1)

packages/schematics/angular/universal/index.ts

@@ -141,9 +141,17 @@ function wrapBootstrapCall(mainFile: string): Rule {
     // indent contents
     const triviaWidth = bootstrapCall.getLeadingTriviaWidth();
     const beforeText =
-      `document.addEventListener('DOMContentLoaded', () => {\n` +
-      ' '.repeat(triviaWidth > 2 ? triviaWidth + 1 : triviaWidth);
-    const afterText = `\n${triviaWidth > 2 ? ' '.repeat(triviaWidth - 1) : ''}});`;
+      `function bootstrap() {\n` + ' '.repeat(triviaWidth > 2 ? triviaWidth + 1 : triviaWidth);
+    const afterText =
+      `\n${triviaWidth > 2 ? ' '.repeat(triviaWidth - 1) : ''}};\n` +
+      `
+
+if (document.readyState === 'complete') {
+  bootstrap();
+} else {
+  document.addEventListener('DOMContentLoaded', bootstrap);
+}
+`;
 
     // in some cases we need to cater for a trailing semicolon such as;
     // bootstrap().catch(err => console.log(err));
@@ -236,8 +244,8 @@ export default function (options: UniversalOptions): Rule {
       throw targetBuildNotFoundError();
     }
 
-    const clientBuildOptions = ((clientBuildTarget.options ||
-      {}) as unknown) as BrowserBuilderOptions;
+    const clientBuildOptions = (clientBuildTarget.options ||
+      {}) as unknown as BrowserBuilderOptions;
 
     const clientTsConfig = normalize(clientBuildOptions.tsConfig);
     const tsConfigExtends = basename(clientTsConfig);

packages/schematics/angular/universal/index_spec.ts

@@ -191,7 +191,7 @@ describe('Universal Schematic', () => {
       .toPromise();
     const filePath = '/projects/bar/src/main.ts';
     const contents = tree.readContent(filePath);
-    expect(contents).toMatch(/document.addEventListener\('DOMContentLoaded', \(\) => {/);
+    expect(contents).toContain(`document.addEventListener('DOMContentLoaded', bootstrap);`);
   });
 
   it('should wrap the bootstrap declaration in a DOMContentLoaded event handler', async () => {
@@ -221,9 +221,7 @@ describe('Universal Schematic', () => {
       .runSchematicAsync('universal', defaultOptions, appTree)
       .toPromise();
     const contents = tree.readContent(filePath);
-    expect(contents).toMatch(
-      /document.addEventListener\('DOMContentLoaded', \(\) => {[\n\r\s]+bootstrap\(\)/,
-    );
+    expect(contents).toContain(`document.addEventListener('DOMContentLoaded', bootstrap);`);
   });
 
   it('should install npm dependencies', async () => {