feat(@schematics/angular): add migration to use new zone.js entry-points

packages/schematics/angular/migrations/migration-collection.json

@@ -129,6 +129,11 @@
       "version": "12.0.0-next.0",
       "factory": "./update-12/update-angular-config",
       "description": "Remove deprecated options from 'angular.json' that are no longer present in v12."
+    },
+    "update-zonejs": {
+      "version": "12.0.0-next.1",
+      "factory": "./update-12/update-zonejs",
+      "description": "Update 'zone.js' to version 0.11.x. Read more about this here: https://github.com/angular/angular/blob/master/packages/zone.js/CHANGELOG.md#breaking-changes-since-zonejs-v0111"
     }
   }
 }

packages/schematics/angular/migrations/update-12/update-zonejs.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { join } from '@angular-devkit/core';
+import { DirEntry, Rule } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { addPackageJsonDependency, getPackageJsonDependency } from '../../utility/dependencies';
+
+const fileExtensionRegexp = /\.(([cm]?j|t)sx?)$/;
+
+function* visitJavaScriptFiles(directory: DirEntry): IterableIterator<string> {
+  for (const path of directory.subfiles) {
+    if (!fileExtensionRegexp.test(path)) {
+      continue;
+    }
+
+    yield join(directory.path, path);
+  }
+
+  for (const path of directory.subdirs) {
+    if (path === 'node_modules' || path.startsWith('.') || path === 'dist') {
+      continue;
+    }
+
+    yield* visitJavaScriptFiles(directory.dir(path));
+  }
+}
+
+export default function (): Rule {
+  return (tree, context) => {
+    const current = getPackageJsonDependency(tree, 'zone.js');
+    if (current && current.version !== '~0.11.4') {
+      addPackageJsonDependency(tree, {
+        type: current.type,
+        name: 'zone.js',
+        version: '~0.11.4',
+        overwrite: true,
+      });
+
+      context.addTask(new NodePackageInstallTask());
+    }
+
+    for (const path of visitJavaScriptFiles(tree.root)) {
+      const buffer = tree.read(path);
+      if (!buffer) {
+        return;
+      }
+
+      const content = buffer.toString();
+      if (!content.includes('zone.js/dist/')) {
+        continue;
+      }
+
+      // RegExp that replaces
+      // - import 'zone.js/dist/zone-testing' -> import 'zone.js/testing'
+      // - require('zone.js/dist/zone-testing') -> require('zone.js/testing')
+      // - import 'zone.js/dist/zone' -> import 'zone.js'
+      // - require('zone.js/dist/zone') -> require('zone.js')
+      // - import 'zone.js/dist/zone-error' -> import 'zone.js/plugins/zone-error'
+      // - require('zone.js/dist/zone-error') -> require('zone.js/plugins/zone-error')
+      tree.overwrite(
+        path,
+        content
+          .replace(
+            /(?<=(?:require\s*\(|import\s+)['"]zone\.js)\/dist\/zone-?\w*(?=['"]\)?)/g,
+            match => {
+              switch (match) {
+                case '/dist/zone':
+                case '/dist/zone-evergreen':
+                  return '';
+                case '/dist/zone-testing':
+                case '/dist/zone-evergreen-testing':
+                  return '/testing';
+                case '/dist/zone-node':
+                  return '/node';
+                case '/dist/zone-mix':
+                  return '/mix';
+                default:
+                  return `/plugins${match.substr(5)}`;
+              }
+            },
+          ),
+      );
+    }
+  };
+}

packages/schematics/angular/migrations/update-12/update-zonejs_spec.ts

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { getPackageJsonDependency } from '../../utility/dependencies';
+
+const schematicName = 'update-zonejs';
+describe(`Migration to update 'zone.js' to 0.11.x. ${schematicName}`, () => {
+  const schematicRunner = new SchematicTestRunner(
+    'migrations',
+    require.resolve('../migration-collection.json'),
+  );
+
+  let tree: UnitTestTree;
+  beforeEach(() => {
+    tree = new UnitTestTree(new EmptyTree());
+    tree.create('/package.json', JSON.stringify({ 'dependencies': { 'zone.js': '~0.10.0' } }, undefined, 2));
+  });
+
+  it(`should update 'zone.js' dependency in 'package.json'`, async () => {
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(getPackageJsonDependency(newTree, 'zone.js')?.version).toBe('~0.11.4');
+  });
+
+  it(`should update 'zone.js/dist/zone' import`, async () => {
+    tree.create('file.ts', `
+      import 'zone.js';
+      import 'zone.js/dist/zone';
+      import "zone.js/dist/zone";
+      // import "zone.js/dist/zone";
+    `);
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.readContent('file.ts')).toBe(`
+      import 'zone.js';
+      import 'zone.js';
+      import "zone.js";
+      // import "zone.js";
+    `);
+  });
+
+  it(`should update 'zone.js/dist/zone' require`, async () => {
+    tree.create('file.ts', `
+      require('zone.js');
+      require('zone.js/dist/zone');
+      require("zone.js/dist/zone");
+      // require("zone.js/dist/zone");
+    `);
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.readContent('file.ts')).toBe(`
+      require('zone.js');
+      require('zone.js');
+      require("zone.js");
+      // require("zone.js");
+    `);
+  });
+
+  it(`should update 'zone.js/dist/zone-error' import`, async () => {
+    tree.create('file.ts', `
+      import 'zone.js/plugins/zone-error';
+      import 'zone.js/dist/zone-error';
+      import "zone.js/dist/zone-error";
+      // import "zone.js/dist/zone-error";
+    `);
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.readContent('file.ts')).toBe(`
+      import 'zone.js/plugins/zone-error';
+      import 'zone.js/plugins/zone-error';
+      import "zone.js/plugins/zone-error";
+      // import "zone.js/plugins/zone-error";
+    `);
+  });
+
+  it(`should update 'zone.js/dist/zone-error' require`, async () => {
+    tree.create('file.ts', `
+      require('zone.js/plugins/zone-error');
+      require('zone.js/dist/zone-error');
+      require("zone.js/dist/zone-error");
+      // require("zone.js/dist/zone-error");
+    `);
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.readContent('file.ts')).toBe(`
+      require('zone.js/plugins/zone-error');
+      require('zone.js/plugins/zone-error');
+      require("zone.js/plugins/zone-error");
+      // require("zone.js/plugins/zone-error");
+    `);
+  });
+
+  it(`should update 'zone.js/dist/zone-testing' import`, async () => {
+    tree.create('file.ts', `
+      import 'zone.js/testing';
+      import 'zone.js/dist/zone-testing';
+      import "zone.js/dist/zone-testing";
+      // import "zone.js/dist/zone-testing";
+    `);
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.readContent('file.ts')).toBe(`
+      import 'zone.js/testing';
+      import 'zone.js/testing';
+      import "zone.js/testing";
+      // import "zone.js/testing";
+    `);
+  });
+
+  it(`should update 'zone.js/dist/zone-testing' require`, async () => {
+    tree.create('file.ts', `
+      require('zone.js/testing');
+      require('zone.js/dist/zone-testing');
+      require("zone.js/dist/zone-testing");
+      // require("zone.js/dist/zone-testing");
+    `);
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.readContent('file.ts')).toBe(`
+      require('zone.js/testing');
+      require('zone.js/testing');
+      require("zone.js/testing");
+      // require("zone.js/testing");
+    `);
+  });
+});

packages/schematics/angular/utility/latest-versions.ts

@@ -10,7 +10,7 @@ export const latestVersions = {
   // These versions should be kept up to date with latest Angular peer dependencies.
   Angular: '~12.0.0-next.0',
   RxJs: '~6.6.0',
-  ZoneJs: '~0.11.3',
+  ZoneJs: '~0.11.4',
   TypeScript: '~4.1.2',
   TsLib: '^2.0.0',