feat(angular): support angular v18.1.0 (#26504)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

Angular v18.1.0 is not supported.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

Angular v18.1.0 should be supported.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

docs/generated/packages/angular/documents/angular-nx-version-matrix.md

@@ -14,6 +14,7 @@ We provide a recommended version, and it is usually the latest minor version of
 
 | Angular Version | **Nx Version _(recommended)_** | Nx Version _(range)_                     |
 | --------------- | ------------------------------ | ---------------------------------------- |
+| ~18.1.0         | **latest**                     | >=19.5.0 <=latest                        |
 | ~18.0.0         | **latest**                     | >=19.1.0 <=latest                        |
 | ~17.3.0         | **latest**                     | >=18.2.0 <=latest                        |
 | ~17.2.0         | **latest**                     | >=18.1.1 <=latest                        |

docs/generated/packages/angular/executors/dev-server.json

@@ -110,6 +110,17 @@
         "description": "Force the development server to use the 'browser-esbuild' builder when building. This is a developer preview option for the esbuild-based build system. _Note: this is only supported in Angular versions >= 16.1.0_.",
         "default": false
       },
+      "inspect": {
+        "default": false,
+        "description": "Activate debugging inspector. This option only has an effect when 'SSR' or 'SSG' are enabled. _Note: this is only supported in Angular versions >= 18.1.0_.",
+        "oneOf": [
+          {
+            "type": "string",
+            "description": "Activate the inspector on host and port in the format of `[[host:]port]`. See the security warning in https://nodejs.org/docs/latest-v22.x/api/cli.html#warning-binding-inspector-to-a-public-ipport-combination-is-insecure regarding the host parameter usage."
+          },
+          { "type": "boolean" }
+        ]
+      },
       "prebundle": {
         "description": "Enable and control the Vite-based development server's prebundling capabilities. To enable prebundling, the Angular CLI cache must also be enabled. This option has no effect when using the 'browser' or other Webpack-based builders. _Note: this is only supported in Angular versions >= 17.2.0_.",
         "oneOf": [

docs/shared/packages/angular/angular-nx-version-matrix.md

@@ -14,6 +14,7 @@ We provide a recommended version, and it is usually the latest minor version of
 
 | Angular Version | **Nx Version _(recommended)_** | Nx Version _(range)_                     |
 | --------------- | ------------------------------ | ---------------------------------------- |
+| ~18.1.0         | **latest**                     | >=19.5.0 <=latest                        |
 | ~18.0.0         | **latest**                     | >=19.1.0 <=latest                        |
 | ~17.3.0         | **latest**                     | >=18.2.0 <=latest                        |
 | ~17.2.0         | **latest**                     | >=18.1.1 <=latest                        |

e2e/angular/src/projects.test.ts

@@ -408,7 +408,7 @@ describe('Angular Projects', () => {
 
     let mainBundle = readFile(`dist/${esbuildApp}/browser/main.js`);
     expect(mainBundle).toContain(
-      'this.buildDefined = "Value was provided at build time";'
+      'buildDefined = "Value was provided at build time";'
     );
 
     // check @nx/angular:browser-esbuild
@@ -426,7 +426,7 @@ describe('Angular Projects', () => {
 
     mainBundle = readFile(`dist/${esbuildApp}/main.js`);
     expect(mainBundle).toContain(
-      'this.buildDefined = "Value was provided at build time";'
+      'buildDefined = "Value was provided at build time";'
     );
   });
 

package.json

@@ -26,19 +26,19 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@angular-devkit/architect": "~0.1800.0",
-    "@angular-devkit/build-angular": "~18.0.0",
-    "@angular-devkit/core": "~18.0.0",
-    "@angular-devkit/schematics": "~18.0.0",
+    "@angular-devkit/architect": "~0.1801.0",
+    "@angular-devkit/build-angular": "~18.1.0",
+    "@angular-devkit/core": "~18.1.0",
+    "@angular-devkit/schematics": "~18.1.0",
     "@angular-eslint/eslint-plugin": "^18.0.1",
     "@angular-eslint/eslint-plugin-template": "^18.0.1",
     "@angular-eslint/template-parser": "^18.0.1",
-    "@angular/cli": "~18.0.0",
-    "@angular/common": "~18.0.0",
-    "@angular/compiler": "~18.0.0",
-    "@angular/compiler-cli": "~18.0.0",
-    "@angular/core": "~18.0.0",
-    "@angular/router": "~18.0.0",
+    "@angular/cli": "~18.1.0",
+    "@angular/common": "~18.1.0",
+    "@angular/compiler": "~18.1.0",
+    "@angular/compiler-cli": "~18.1.0",
+    "@angular/core": "~18.1.0",
+    "@angular/router": "~18.1.0",
     "@babel/core": "^7.23.2",
     "@babel/helper-create-regexp-features-plugin": "^7.22.9",
     "@babel/plugin-transform-runtime": "^7.23.2",
@@ -95,7 +95,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "@schematics/angular": "~18.0.0",
+    "@schematics/angular": "~18.1.0",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/core-server": "7.5.3",
     "@storybook/react": "7.5.3",
@@ -133,10 +133,10 @@
     "@types/tmp": "^0.2.0",
     "@types/yargs": "^17.0.10",
     "@types/yarnpkg__lockfile": "^1.1.5",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.0",
-    "@typescript-eslint/type-utils": "^7.3.0",
-    "@typescript-eslint/utils": "7.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/type-utils": "^7.16.0",
+    "@typescript-eslint/utils": "^7.16.0",
     "@xstate/immer": "0.3.1",
     "@xstate/inspect": "0.7.0",
     "@xstate/react": "3.0.1",
@@ -231,7 +231,7 @@
     "mini-css-extract-plugin": "~2.4.7",
     "minimatch": "9.0.3",
     "next-sitemap": "^3.1.10",
-    "ng-packagr": "~18.0.0",
+    "ng-packagr": "~18.1.0",
     "node-fetch": "^2.6.7",
     "npm-package-arg": "11.0.1",
     "nuxt": "^3.10.0",
@@ -283,7 +283,7 @@
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "typedoc": "0.25.12",
     "typedoc-plugin-markdown": "3.17.1",
-    "typescript": "~5.4.2",
+    "typescript": "~5.5.2",
     "unist-builder": "^4.0.0",
     "unzipper": "^0.10.11",
     "url-loader": "^4.1.1",

packages/angular/migrations.json

@@ -404,6 +404,15 @@
       },
       "description": "Installs the '@typescript-eslint/utils' package when having installed '@angular-eslint/eslint-plugin' or '@angular-eslint/eslint-plugin-template' with version >=18.0.0.",
       "factory": "./src/migrations/update-19-2-1/add-typescript-eslint-utils"
+    },
+    "update-angular-cli-version-18-1-0": {
+      "cli": "nx",
+      "version": "19.5.0-beta.1",
+      "requires": {
+        "@angular/core": ">=18.1.0"
+      },
+      "description": "Update the @angular/cli package version to ~18.1.0.",
+      "factory": "./src/migrations/update-19-5-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1942,6 +1951,67 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.5.0": {
+      "version": "19.5.0-beta.1",
+      "x-prompt": "Do you want to update the Angular version to v18.1?",
+      "requires": {
+        "@angular/core": ">=18.0.0 <18.1.0"
+      },
+      "packages": {
+        "@angular-devkit/build-angular": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/build": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/pwa": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/ssr": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/architect": {
+          "version": "~0.1801.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1801.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~18.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/package.json

@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@phenomnomnominal/tsquery": "~5.0.1",
-    "@typescript-eslint/type-utils": "^7.3.0",
+    "@typescript-eslint/type-utils": "^7.16.0",
     "chalk": "^4.1.0",
     "find-cache-dir": "^3.3.2",
     "ignore": "^5.0.4",

packages/angular/src/builders/dev-server/lib/validate-options.ts

@@ -21,4 +21,9 @@ export function validateOptions(options: Schema): void {
     throw new Error(stripIndents`The "prebundle" option is only supported in Angular >= 17.2.0. You are currently using "${angularVersion}".
       You can resolve this error by removing the "prebundle" option or by migrating to Angular 17.2.0.`);
   }
+
+  if (lt(angularVersion, '18.1.0') && options.inspect) {
+    throw new Error(stripIndents`The "inspect" option is only supported in Angular >= 18.1.0. You are currently using "${angularVersion}".
+      You can resolve this error by removing the "inspect" option or by migrating to Angular 18.1.0.`);
+  }
 }

packages/angular/src/builders/dev-server/schema.d.ts

@@ -17,6 +17,7 @@ interface BaseSchema {
   watch?: boolean;
   poll?: number;
   forceEsbuild?: boolean;
+  inspect?: boolean | string;
   prebundle?: boolean | { exclude: string[] };
   buildLibsFromSource?: boolean;
   esbuildMiddleware?: string[];

packages/angular/src/builders/dev-server/schema.json

@@ -116,6 +116,17 @@
       "description": "Force the development server to use the 'browser-esbuild' builder when building. This is a developer preview option for the esbuild-based build system. _Note: this is only supported in Angular versions >= 16.1.0_.",
       "default": false
     },
+    "inspect": {
+      "default": false,
+      "description": "Activate debugging inspector. This option only has an effect when 'SSR' or 'SSG' are enabled. _Note: this is only supported in Angular versions >= 18.1.0_.",
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "Activate the inspector on host and port in the format of `[[host:]port]`. See the security warning in https://nodejs.org/docs/latest-v22.x/api/cli.html#warning-binding-inspector-to-a-public-ipport-combination-is-insecure regarding the host parameter usage."
+        },
+        { "type": "boolean" }
+      ]
+    },
     "prebundle": {
       "description": "Enable and control the Vite-based development server's prebundling capabilities. To enable prebundling, the Angular CLI cache must also be enabled. This option has no effect when using the 'browser' or other Webpack-based builders. _Note: this is only supported in Angular versions >= 17.2.0_.",
       "oneOf": [

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

@@ -35,12 +35,12 @@ export class AppComponent {}
 exports[`app --minimal should skip "nx-welcome.component.ts" file and references for non-standalone apps with routing 3`] = `
 "import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       declarations: [AppComponent]
     }).compileComponents();
   });
@@ -138,12 +138,12 @@ export class AppComponent {}
 exports[`app --minimal should skip "nx-welcome.component.ts" file and references for standalone apps with routing 2`] = `
 "import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent, RouterTestingModule],
+      imports: [AppComponent, RouterModule.forRoot([])],
     }).compileComponents();
   });
 
@@ -390,7 +390,6 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
     "noPropertyAccessFromIndexSignature": true,
     "strict": true,
     "target": "es2022",
-    "useDefineForClassFields": false,
   },
   "extends": "../../../tsconfig.base.json",
   "files": [],
@@ -593,7 +592,6 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
     "noPropertyAccessFromIndexSignature": true,
     "strict": true,
     "target": "es2022",
-    "useDefineForClassFields": false,
   },
   "extends": "../../tsconfig.base.json",
   "files": [],
@@ -663,12 +661,12 @@ exports[`app --standalone should generate a standalone app correctly with routin
 "import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent, NxWelcomeComponent, RouterTestingModule],
+      imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])],
     }).compileComponents();
   });
 
@@ -785,7 +783,6 @@ exports[`app --strict should enable strict type checking: app tsconfig.json 1`]
     "noPropertyAccessFromIndexSignature": true,
     "strict": true,
     "target": "es2022",
-    "useDefineForClassFields": false,
   },
   "extends": "../tsconfig.base.json",
   "files": [],
@@ -883,12 +880,12 @@ exports[`app format files should format files 3`] = `
 "import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       declarations: [AppComponent, NxWelcomeComponent],
     }).compileComponents();
   });
@@ -1218,7 +1215,6 @@ exports[`app not nested should generate files: tsconfig.json 1`] = `
     "noPropertyAccessFromIndexSignature": true,
     "strict": true,
     "target": "es2022",
-    "useDefineForClassFields": false,
   },
   "extends": "../tsconfig.base.json",
   "files": [],