fix(@schematics/angular): wrap bootstrapping code in an HMR compatible 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)

Author: alan-agius4

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 () => {