fix(angular): do not wrap bootstrap call when setting up ssr in workspaces with angular >= 15.2.0 (#16714)

packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -22,21 +22,7 @@ export class AppModule {}
 `;
 
 exports[`Host App Generator --ssr should generate the correct files 2`] = `
-"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+"import('./bootstrap').catch((err) => console.error(err));
-
-import { AppModule } from './app/app.module';
-
-function bootstrap() {
-  platformBrowserDynamic()
-    .bootstrapModule(AppModule)
-    .catch((err) => console.error(err));
-}
-
-if (document.readyState !== 'loading') {
-  bootstrap();
-} else {
-  document.addEventListener('DOMContentLoaded', bootstrap);
-}
 "
 `;
 

packages/angular/src/generators/setup-ssr/files/base/src/main.ts__tpl__

@@ -1,16 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-function bootstrap() {
-  platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
-};
-
-
- if (document.readyState !== 'loading') {
-   bootstrap();
- } else {
-   document.addEventListener('DOMContentLoaded', bootstrap);
- }

packages/angular/src/generators/setup-ssr/files/pre-v15-2/src/main.ts__tpl__

@@ -0,0 +1,14 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+function bootstrap() {
+  platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+}
+
+if (document.readyState !== 'loading') {
+  bootstrap();
+} else {
+  document.addEventListener('DOMContentLoaded', bootstrap);
+}

packages/angular/src/generators/setup-ssr/lib/generate-files.ts

@@ -4,8 +4,12 @@ import {
   joinPathFragments,
   readProjectConfiguration,
 } from '@nx/devkit';
-import { getInstalledAngularMajorVersion } from '../../utils/version-utils';
+import {
+  getInstalledAngularMajorVersion,
+  getInstalledAngularVersionInfo,
+} from '../../utils/version-utils';
 import type { Schema } from '../schema';
+import { lt } from 'semver';
 
 export function generateSSRFiles(tree: Tree, schema: Schema) {
   const projectRoot = readProjectConfiguration(tree, schema.project).root;
@@ -17,7 +21,8 @@ export function generateSSRFiles(tree: Tree, schema: Schema) {
     { ...schema, tpl: '' }
   );
 
-  const angularMajorVersion = getInstalledAngularMajorVersion(tree);
+  const { major: angularMajorVersion, version: angularVersion } =
+    getInstalledAngularVersionInfo(tree);
   if (angularMajorVersion < 15) {
     generateFiles(
       tree,
@@ -26,4 +31,13 @@ export function generateSSRFiles(tree: Tree, schema: Schema) {
       { ...schema, tpl: '' }
     );
   }
+
+  if (lt(angularVersion, '15.2.0')) {
+    generateFiles(
+      tree,
+      joinPathFragments(__dirname, '..', 'files', 'pre-v15-2'),
+      projectRoot,
+      { ...schema, tpl: '' }
+    );
+  }
 }

packages/angular/src/generators/setup-ssr/setup-ssr.spec.ts

@@ -35,20 +35,11 @@ describe('setupSSR', () => {
     `);
     expect(tree.read('apps/app1/src/main.ts', 'utf-8')).toMatchInlineSnapshot(`
       "import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
       import { AppModule } from './app/app.module';
 
-      function bootstrap() {
       platformBrowserDynamic()
         .bootstrapModule(AppModule)
         .catch((err) => console.error(err));
-      }
-
-      if (document.readyState !== 'loading') {
-        bootstrap();
-      } else {
-        document.addEventListener('DOMContentLoaded', bootstrap);
-      }
       "
     `);
     expect(tree.read('apps/app1/tsconfig.server.json', 'utf-8'))
@@ -220,5 +211,40 @@ describe('setupSSR', () => {
         "
       `);
     });
+
+    it('should wrap bootstrap call for Angular versions lower than 15.2', async () => {
+      // ARRANGE
+      const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+      await generateTestApplication(tree, {
+        name: 'app1',
+      });
+      updateJson(tree, 'package.json', (json) => ({
+        ...json,
+        dependencies: { '@angular/core': '15.1.0' },
+      }));
+
+      // ACT
+      await setupSsr(tree, { project: 'app1' });
+
+      // ASSERT
+      expect(tree.read('apps/app1/src/main.ts', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+        import { AppModule } from './app/app.module';
+
+        function bootstrap() {
+          platformBrowserDynamic()
+            .bootstrapModule(AppModule)
+            .catch((err) => console.error(err));
+        }
+
+        if (document.readyState !== 'loading') {
+          bootstrap();
+        } else {
+          document.addEventListener('DOMContentLoaded', bootstrap);
+        }
+        "
+      `);
+    });
   });
 });

packages/angular/src/migrations/update-15-9-0/update-file-server-executor.spec.ts

@@ -78,8 +78,6 @@ describe('updateFileServerExecutor', () => {
     addProjectConfiguration(tree, 'test', project);
 
     // ACT
-    expect(async () => {
+    await expect(updateFileServerExecutor(tree)).resolves.not.toThrow();
-      await updateFileServerExecutor(tree);
-    }).not.toThrow();
   });
 });