fix(angular): add migration to replace deep imports from zone.js

packages/angular/migrations.json

@@ -323,6 +323,15 @@
       },
       "description": "Replace usages of '@nguniversal/' packages with '@angular/ssr'.",
       "factory": "./src/migrations/update-17-1-0/replace-nguniversal-engines"
+    },
+    "update-zone-js-deep-import": {
+      "cli": "nx",
+      "version": "17.1.0-beta.4",
+      "requires": {
+        "@angular/core": ">=17.0.0-rc.3"
+      },
+      "description": "Replace the deep imports from 'zone.js/dist/zone' and 'zone.js/dist/zone-testing' with 'zone.js' and 'zone.js/testing'.",
+      "factory": "./src/migrations/update-17-1-0/update-zone-js-deep-import"
     }
   },
   "packageJsonUpdates": {

packages/angular/src/migrations/update-17-1-0/stub-performance-mark-in-jest-test-setup.ts

@@ -10,6 +10,11 @@ export default async function (tree: Tree): Promise<void> {
   const angularProjects = await getProjectsFilteredByDependencies(tree, [
     'npm:@angular/core',
   ]);
+
+  if (!angularProjects.length) {
+    return;
+  }
+
   const jestConfigFiles = new Set<string>();
 
   const projectGraph = await createProjectGraphAsync();

packages/angular/src/migrations/update-17-1-0/update-zone-js-deep-import.spec.ts

@@ -0,0 +1,134 @@
+import {
+  addProjectConfiguration,
+  type ProjectConfiguration,
+  type ProjectGraph,
+  type Tree,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import migration from './update-zone-js-deep-import';
+
+let projectGraph: ProjectGraph;
+jest.mock('@nx/devkit', () => ({
+  ...jest.requireActual('@nx/devkit'),
+  createProjectGraphAsync: () => Promise.resolve(projectGraph),
+}));
+
+describe('update-zone-js-deep-imports migration', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should replace replace import from "zone.js/dist/zone"', async () => {
+    addProject(tree, 'app1', { name: 'app1', root: 'apps/app1' }, [
+      'npm:@angular/core',
+    ]);
+    tree.write(
+      'apps/app1/src/polyfills.ts',
+      `
+    /***************************************************************************************************
+     * Zone JS is required by default for Angular itself.
+     */
+    import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+    /***************************************************************************************************
+     * APPLICATION IMPORTS
+     */
+    `
+    );
+
+    await migration(tree);
+
+    expect(tree.read('apps/app1/src/polyfills.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "/***************************************************************************************************
+       * Zone JS is required by default for Angular itself.
+       */
+      import 'zone.js'; // Included with Angular CLI.
+
+      /***************************************************************************************************
+       * APPLICATION IMPORTS
+       */
+      "
+    `);
+  });
+
+  it('should replace replace import from "zone.js/dist/zone-testing"', async () => {
+    addProject(tree, 'app1', { name: 'app1', root: 'apps/app1' }, [
+      'npm:@angular/core',
+    ]);
+    tree.write(
+      'apps/app1/src/test.ts',
+      `
+      // This file is required by karma.conf.js and loads recursively all the .spec and framework files
+      import 'zone.js/dist/zone';
+      import 'zone.js/dist/zone-testing';
+      import { getTestBed } from '@angular/core/testing';
+      import {
+        BrowserDynamicTestingModule,
+        platformBrowserDynamicTesting
+      } from '@angular/platform-browser-dynamic/testing';
+
+      declare const require: any;
+
+      // First, initialize the Angular testing environment.
+      getTestBed().initTestEnvironment(
+        BrowserDynamicTestingModule,
+        platformBrowserDynamicTesting()
+      );
+      // Then we find all the tests.
+      const context = require.context('./', true, /\.spec\.ts$/);
+      // And load the modules.
+      context.keys().map(context);
+    `
+    );
+
+    await migration(tree);
+
+    expect(tree.read('apps/app1/src/test.ts', 'utf-8')).toMatchInlineSnapshot(`
+      "// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+      import 'zone.js';
+      import 'zone.js/testing';
+      import { getTestBed } from '@angular/core/testing';
+      import {
+        BrowserDynamicTestingModule,
+        platformBrowserDynamicTesting,
+      } from '@angular/platform-browser-dynamic/testing';
+
+      declare const require: any;
+
+      // First, initialize the Angular testing environment.
+      getTestBed().initTestEnvironment(
+        BrowserDynamicTestingModule,
+        platformBrowserDynamicTesting()
+      );
+      // Then we find all the tests.
+      const context = require.context('./', true, /.spec.ts$/);
+      // And load the modules.
+      context.keys().map(context);
+      "
+    `);
+  });
+});
+
+function addProject(
+  tree: Tree,
+  projectName: string,
+  config: ProjectConfiguration,
+  dependencies: string[]
+): void {
+  projectGraph = {
+    dependencies: {
+      [projectName]: dependencies.map((d) => ({
+        source: projectName,
+        target: d,
+        type: 'static',
+      })),
+    },
+    nodes: {
+      [projectName]: { data: config, name: projectName, type: 'app' },
+    },
+  };
+  addProjectConfiguration(tree, projectName, config);
+}

packages/angular/src/migrations/update-17-1-0/update-zone-js-deep-import.ts

@@ -0,0 +1,45 @@
+import { formatFiles, visitNotIgnoredFiles, type Tree } from '@nx/devkit';
+import { getProjectsFilteredByDependencies } from '../utils/projects';
+
+export default async function (tree: Tree) {
+  const angularProjects = await getProjectsFilteredByDependencies(tree, [
+    'npm:@angular/core',
+  ]);
+
+  if (!angularProjects.length) {
+    return;
+  }
+
+  const zoneJsImportRegex = /(['"`])zone\.js\/dist\/zone(['"`])/g;
+  const zoneJsTestingImportRegex =
+    /(['"`])zone\.js\/dist\/zone-testing(['"`])/g;
+  for (const { project } of angularProjects) {
+    visitNotIgnoredFiles(tree, project.root, (file) => {
+      // we are only interested in .ts files
+      if (!file.endsWith('.ts')) {
+        return;
+      }
+
+      let content = tree.read(file, 'utf-8');
+
+      let wasUpdated = false;
+      if (zoneJsImportRegex.test(content)) {
+        content = content.replace(zoneJsImportRegex, '$1zone.js$2');
+        wasUpdated = true;
+      }
+      if (zoneJsTestingImportRegex.test(content)) {
+        content = content.replace(
+          zoneJsTestingImportRegex,
+          '$1zone.js/testing$2'
+        );
+        wasUpdated = true;
+      }
+
+      if (wasUpdated) {
+        tree.write(file, content);
+      }
+    });
+  }
+
+  await formatFiles(tree);
+}