feat(angular): support angular v16.1 (nrwl#17155)

Author: leosvelperez

e2e/angular-extensions/src/cypress-component-tests.test.ts

@@ -14,7 +14,8 @@ import {
 import { names } from '@nx/devkit';
 import { join } from 'path';
 
-describe('Angular Cypress Component Tests', () => {
+// TODO(leo): enable when https://github.com/cypress-io/cypress/pull/27030 is merged and released
+describe.skip('Angular Cypress Component Tests', () => {
   let projectName: string;
   const appName = uniq('cy-angular-app');
   const usedInAppLibName = uniq('cy-angular-lib');

e2e/cypress/src/cypress.test.ts

@@ -178,7 +178,8 @@ describe('env vars', () => {
     'should allow CT and e2e in the same project',
     async () => {
       await testCtAndE2eInProject('next');
-      await testCtAndE2eInProject('angular');
+      // TODO(leo): uncomment when https://github.com/cypress-io/cypress/pull/27030 is merged and released
+      // await testCtAndE2eInProject('angular');
       await testCtAndE2eInProject('react');
     },
     TEN_MINS_MS

package.json

@@ -28,19 +28,19 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@angular-devkit/architect": "~0.1600.0",
-    "@angular-devkit/build-angular": "~16.0.0",
-    "@angular-devkit/core": "~16.0.0",
-    "@angular-devkit/schematics": "~16.0.0",
+    "@angular-devkit/architect": "~0.1601.0",
+    "@angular-devkit/build-angular": "~16.1.0",
+    "@angular-devkit/core": "~16.1.0",
+    "@angular-devkit/schematics": "~16.1.0",
     "@angular-eslint/eslint-plugin": "~16.0.0",
     "@angular-eslint/eslint-plugin-template": "~16.0.0",
     "@angular-eslint/template-parser": "~16.0.0",
-    "@angular/cli": "~16.0.0",
-    "@angular/common": "~16.0.0",
-    "@angular/compiler": "~16.0.0",
-    "@angular/compiler-cli": "~16.0.0",
-    "@angular/core": "~16.0.0",
-    "@angular/router": "~16.0.0",
+    "@angular/cli": "~16.1.0",
+    "@angular/common": "~16.1.0",
+    "@angular/compiler": "~16.1.0",
+    "@angular/compiler-cli": "~16.1.0",
+    "@angular/core": "~16.1.0",
+    "@angular/router": "~16.1.0",
     "@babel/core": "^7.15.0",
     "@babel/helper-create-regexp-features-plugin": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.15.0",
@@ -63,7 +63,7 @@
     "@ngrx/effects": "~16.0.0",
     "@ngrx/router-store": "~16.0.0",
     "@ngrx/store": "~16.0.0",
-    "@nguniversal/builders": "~16.0.0",
+    "@nguniversal/builders": "~16.1.0",
     "@nx/cypress": "16.4.0-beta.9",
     "@nx/devkit": "16.4.0-beta.9",
     "@nx/eslint-plugin": "16.4.0-beta.9",
@@ -86,7 +86,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^7.0.0",
-    "@schematics/angular": "~16.0.0",
+    "@schematics/angular": "~16.1.0",
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/core-server": "^7.0.9",
     "@storybook/react": "^7.0.9",
@@ -208,7 +208,7 @@
     "mini-css-extract-plugin": "~2.4.7",
     "minimatch": "3.0.5",
     "next-sitemap": "^3.1.10",
-    "ng-packagr": "~16.0.0",
+    "ng-packagr": "~16.1.0",
     "node-fetch": "^2.6.7",
     "nx": "16.4.0-beta.9",
     "nx-cloud": "16.0.5",
@@ -259,9 +259,9 @@
     "tsconfig-paths": "^4.1.2",
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslint-to-eslint-config": "^2.13.0",
-    "typedoc": "0.23.28",
-    "typedoc-plugin-markdown": "3.14.0",
-    "typescript": "~5.0.2",
+    "typedoc": "0.24.8",
+    "typedoc-plugin-markdown": "3.15.3",
+    "typescript": "~5.1.3",
     "unzipper": "^0.10.11",
     "url-loader": "^4.1.1",
     "use-sync-external-store": "^1.2.0",

packages/angular/migrations.json

@@ -254,6 +254,15 @@
       },
       "description": "Remove the 'accessibility-' prefix from '@angular-eslint/eslint-plugin-template' rules.",
       "factory": "./src/migrations/update-16-4-0/rename-angular-eslint-accesibility-rules"
+    },
+    "update-angular-cli-version-16-1-0": {
+      "cli": "nx",
+      "version": "16.4.0-beta.11",
+      "requires": {
+        "@angular/core": ">=16.1.0"
+      },
+      "description": "Update the @angular/cli package version to ~16.1.0.",
+      "factory": "./src/migrations/update-16-4-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1159,6 +1168,67 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.4.0": {
+      "version": "16.4.0-beta.11",
+      "x-prompt": "Do you want to update the Angular version to v16.1?",
+      "requires": {
+        "@angular/core": ">=16.0.0 <16.1.0"
+      },
+      "packages": {
+        "@angular-devkit/architect": {
+          "version": "~0.1601.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-angular": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1601.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nguniversal/builders": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nguniversal/common": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nguniversal/express-engine": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~16.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/src/migrations/update-16-4-0/update-angular-cli.spec.ts

@@ -0,0 +1,42 @@
+import { readJson, Tree, writeJson } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import updateAngularCli, { angularCliVersion } from './update-angular-cli';
+
+describe('update-angular-cli migration', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+  });
+
+  it('should update @angular/cli version when defined as a dev dependency', async () => {
+    writeJson(tree, 'package.json', {
+      devDependencies: { '@angular/cli': '~13.3.0' },
+    });
+
+    await updateAngularCli(tree);
+
+    const { devDependencies } = readJson(tree, 'package.json');
+    expect(devDependencies['@angular/cli']).toBe(angularCliVersion);
+  });
+
+  it('should update @angular/cli version when defined as a dependency', async () => {
+    writeJson(tree, 'package.json', {
+      dependencies: { '@angular/cli': '~13.3.0' },
+    });
+
+    await updateAngularCli(tree);
+
+    const { dependencies } = readJson(tree, 'package.json');
+    expect(dependencies['@angular/cli']).toBe(angularCliVersion);
+  });
+
+  it('should not add @angular/cli to package.json when it is not set', async () => {
+    const initialPackageJson = readJson(tree, 'package.json');
+
+    await updateAngularCli(tree);
+
+    const packageJson = readJson(tree, 'package.json');
+    expect(packageJson).toStrictEqual(initialPackageJson);
+  });
+});

packages/angular/src/migrations/update-16-4-0/update-angular-cli.ts

@@ -0,0 +1,23 @@
+import { formatFiles, Tree, updateJson } from '@nx/devkit';
+
+export const angularCliVersion = '~16.1.0';
+
+export default async function (tree: Tree) {
+  let shouldFormat = false;
+
+  updateJson(tree, 'package.json', (json) => {
+    if (json.devDependencies?.['@angular/cli']) {
+      json.devDependencies['@angular/cli'] = angularCliVersion;
+      shouldFormat = true;
+    } else if (json.dependencies?.['@angular/cli']) {
+      json.dependencies['@angular/cli'] = angularCliVersion;
+      shouldFormat = true;
+    }
+
+    return json;
+  });
+
+  if (shouldFormat) {
+    await formatFiles(tree);
+  }
+}

packages/angular/src/utils/versions.ts

@@ -1,15 +1,15 @@
 export const nxVersion = require('../../package.json').version;
 
-export const angularVersion = '~16.0.0';
-export const angularDevkitVersion = '~16.0.0';
-export const ngPackagrVersion = '~16.0.0';
+export const angularVersion = '~16.1.0';
+export const angularDevkitVersion = '~16.1.0';
+export const ngPackagrVersion = '~16.1.0';
 export const ngrxVersion = '~16.0.0';
 export const rxjsVersion = '~7.8.0';
 export const zoneJsVersion = '~0.13.0';
 export const angularJsVersion = '1.7.9';
 export const tsLibVersion = '^2.3.0';
 
-export const ngUniversalVersion = '~16.0.0';
+export const ngUniversalVersion = '~16.1.0';
 export const corsVersion = '~2.8.5';
 export const typesCorsVersion = '~2.8.5';
 export const expressVersion = '~4.18.2';

packages/cypress/migrations.json

@@ -59,6 +59,12 @@
       "version": "16.4.0-beta.10",
       "description": "Remove tsconfig.e2e.json and add settings to project tsconfig.json. tsConfigs executor option is now deprecated. The project level tsconfig.json file should be used instead.",
       "implementation": "./src/migrations/update-16-4-0/tsconfig-sourcemaps"
+    },
+    "update-16-4-0-warn-incompatible-angular-cypress": {
+      "cli": "nx",
+      "version": "16.4.0-beta.11",
+      "description": "Cypress Component Testing is broken with Angular 16.1.0. Warn about it if the workspace has Angular >= 16.1.0 and Angular projects using Component Testing.",
+      "implementation": "./src/migrations/update-16-4-0/warn-incompatible-angular-cypress"
     }
   },
   "packageJsonUpdates": {