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/architect": "~0.1801.0",
-    "@angular-devkit/build-angular": "~18.0.0",
+    "@angular-devkit/build-angular": "~18.1.0",
-    "@angular-devkit/core": "~18.0.0",
+    "@angular-devkit/core": "~18.1.0",
-    "@angular-devkit/schematics": "~18.0.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/cli": "~18.1.0",
-    "@angular/common": "~18.0.0",
+    "@angular/common": "~18.1.0",
-    "@angular/compiler": "~18.0.0",
+    "@angular/compiler": "~18.1.0",
-    "@angular/compiler-cli": "~18.0.0",
+    "@angular/compiler-cli": "~18.1.0",
-    "@angular/core": "~18.0.0",
+    "@angular/core": "~18.1.0",
-    "@angular/router": "~18.0.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/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "7.4.0",
+    "@typescript-eslint/parser": "^7.16.0",
-    "@typescript-eslint/type-utils": "^7.3.0",
+    "@typescript-eslint/type-utils": "^7.16.0",
-    "@typescript-eslint/utils": "7.4.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": [],

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

@@ -448,7 +448,7 @@ describe('app', () => {
   });
 
   describe('routing', () => {
-    it('should include RouterTestingModule', async () => {
+    it('should include RouterModule', async () => {
       await generateApp(appTree, 'myApp', {
         directory: 'my-dir/my-app',
       });
@@ -457,7 +457,7 @@ describe('app', () => {
       ).toContain('RouterModule.forRoot');
       expect(
         appTree.read('my-dir/my-app/src/app/app.component.spec.ts', 'utf-8')
-      ).toContain('imports: [RouterTestingModule]');
+      ).toContain('imports: [RouterModule.forRoot([])]');
     });
 
     it('should not modify tests when --skip-tests is set', async () => {
@@ -1259,6 +1259,42 @@ describe('app', () => {
       ).toMatchSnapshot();
     });
 
+    it('should import "RouterTestingModule" in test files', async () => {
+      await generateApp(appTree, 'my-app', { standalone: true });
+
+      expect(appTree.read('my-app/src/app/app.component.spec.ts', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "import { TestBed } from '@angular/core/testing';
+        import { AppComponent } from './app.component';
+        import { NxWelcomeComponent } from './nx-welcome.component';
+        import { RouterTestingModule } from '@angular/router/testing';
+
+        describe('AppComponent', () => {
+          beforeEach(async () => {
+            await TestBed.configureTestingModule({
+              imports: [AppComponent, NxWelcomeComponent, RouterTestingModule],
+            }).compileComponents();
+          });
+
+          it('should render title', () => {
+            const fixture = TestBed.createComponent(AppComponent);
+            fixture.detectChanges();
+            const compiled = fixture.nativeElement as HTMLElement;
+            expect(compiled.querySelector('h1')?.textContent).toContain(
+              'Welcome my-app'
+            );
+          });
+
+          it(\`should have as title 'my-app'\`, () => {
+            const fixture = TestBed.createComponent(AppComponent);
+            const app = fixture.componentInstance;
+            expect(app.title).toEqual('my-app');
+          });
+        });
+        "
+      `);
+    });
+
     it('should use "@angular-devkit/build-angular:browser-esbuild" for --bundler=esbuild', async () => {
       await generateApp(appTree, 'my-app', {
         standalone: true,
@@ -1299,6 +1335,15 @@ describe('app', () => {
       ).toBeUndefined();
     });
 
+    it('should disable modern class fields behavior', async () => {
+      await generateApp(appTree, 'my-app');
+
+      expect(
+        readJson(appTree, 'my-app/tsconfig.json').compilerOptions
+          .useDefineForClassFields
+      ).toBe(false);
+    });
+
     it('should configure the correct assets for versions lower than v18', async () => {
       updateJson(appTree, 'package.json', (json) => ({
         ...json,

packages/angular/src/generators/application/files/base/tsconfig.json__tpl__

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2022",
+    "target": "es2022"<% if (disableModernClassFieldsBehavior) { %>,
-    "useDefineForClassFields": false<% if (isUsingApplicationBuilder) { %>,
+    "useDefineForClassFields": false<% } %><% if (isUsingApplicationBuilder) { %>,
     "esModuleInterop": true<% } %>
   },
   "files": [],

packages/angular/src/generators/application/files/ng-module/src/app/app.component.spec.ts__tpl__

@@ -1,12 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';<% if(!minimal) { %>
-import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing) { %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing && useRouterTestingModule) { %>
-import { RouterTestingModule } from '@angular/router/testing';<% } %>
+import { RouterTestingModule } from '@angular/router/testing';<% } %><% if(routing && !useRouterTestingModule) { %>
+import { RouterModule } from '@angular/router';<% } %>
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [<% if(routing) { %>RouterTestingModule<% } %>],
+      imports: [<% if(routing && useRouterTestingModule) { %>RouterTestingModule<% } %><% if(routing && !useRouterTestingModule) { %>RouterModule.forRoot([])<% } %>],
       declarations: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %>]
     }).compileComponents();
   });

packages/angular/src/generators/application/files/standalone-components/src/app/app.component.spec.ts__tpl__

@@ -1,12 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';<% if(!minimal) { %>
-import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing) { %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing && useRouterTestingModule) { %>
-import { RouterTestingModule } from '@angular/router/testing';<% } %>
+import { RouterTestingModule } from '@angular/router/testing';<% } %><% if(routing && !useRouterTestingModule) { %>
+import { RouterModule } from '@angular/router';<% } %>
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %><% if(routing) { %>, RouterTestingModule<% } %>],
+      imports: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %><% if(routing && useRouterTestingModule) { %>, RouterTestingModule<% } %><% if(routing && !useRouterTestingModule) { %>, RouterModule.forRoot([])<% } %>],
     }).compileComponents();
   });
 

packages/angular/src/generators/application/lib/create-files.ts

@@ -1,20 +1,23 @@
 import type { Tree } from '@nx/devkit';
 import { generateFiles, joinPathFragments } from '@nx/devkit';
-import type { NormalizedSchema } from './normalized-schema';
 import { getRelativePathToRootTsConfig, getRootTsConfigFileName } from '@nx/js';
-import { updateProjectRootTsConfig } from '../../utils/update-project-root-tsconfig';
+import { lt } from 'semver';
 import { UnitTestRunner } from '../../../utils/test-runners';
-import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
 import { validateHtmlSelector } from '../../utils/selector';
+import { updateProjectRootTsConfig } from '../../utils/update-project-root-tsconfig';
+import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
+import type { NormalizedSchema } from './normalized-schema';
 
 export async function createFiles(
   tree: Tree,
   options: NormalizedSchema,
   rootOffset: string
 ) {
-  const { major: angularMajorVersion } = getInstalledAngularVersionInfo(tree);
+  const { major: angularMajorVersion, version: angularVersion } =
+    getInstalledAngularVersionInfo(tree);
   const isUsingApplicationBuilder =
     angularMajorVersion >= 17 && options.bundler === 'esbuild';
+  const disableModernClassFieldsBehavior = lt(angularVersion, '18.1.0-rc.0');
 
   const rootSelector = `${options.prefix}-root`;
   validateHtmlSelector(rootSelector);
@@ -36,7 +39,9 @@ export async function createFiles(
     angularMajorVersion,
     rootOffset,
     isUsingApplicationBuilder,
+    disableModernClassFieldsBehavior,
     useEventCoalescing: angularMajorVersion >= 18,
+    useRouterTestingModule: angularMajorVersion < 18,
     tpl: '',
   };
 

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

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Host App Generator --ssr compat should generate the correct app component spec file using RouterTestingModule 1`] = `
+"import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { NxWelcomeComponent } from './nx-welcome.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Router } from '@angular/router';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule.withRoutes([
+          { path: '', component: NxWelcomeComponent },
+        ]),
+        AppComponent,
+        NxWelcomeComponent,
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(\`should have as title 'host'\`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('host');
+  });
+
+  it('should render title', fakeAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const router = TestBed.inject(Router);
+    fixture.ngZone?.run(() => router.navigate(['']));
+    tick();
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome host'
+    );
+  }));
+});
+"
+`;
+
 exports[`Host App Generator --ssr compat should generate the correct main.server.ts 1`] = `
 "import 'zone.js/dist/zone-node';
 
@@ -976,14 +1023,13 @@ exports[`Host App Generator should generate the correct app component spec file
 "import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
-import { Router } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes([
+        RouterModule.forRoot([
           { path: '', component: NxWelcomeComponent },
         ]),
         AppComponent,
@@ -1023,14 +1069,13 @@ exports[`Host App Generator should generate the correct app component spec file
 "import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
-import { Router } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes([
+        RouterModule.forRoot([
           { path: '', component: NxWelcomeComponent },
         ]),
         AppComponent,

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

@@ -516,6 +516,26 @@ describe('Host App Generator', () => {
 
         expect(tree.read(`test/src/main.server.ts`, 'utf-8')).toMatchSnapshot();
       });
+
+      it('should generate the correct app component spec file using RouterTestingModule', async () => {
+        const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+        updateJson(tree, 'package.json', (json) => ({
+          ...json,
+          dependencies: {
+            '@angular/core': '15.2.0',
+          },
+        }));
+
+        await generateTestHostApplication(tree, {
+          name: 'host',
+          remotes: ['remote1'],
+          skipFormat: true,
+        });
+
+        expect(
+          tree.read(`host/src/app/app.component.spec.ts`, 'utf-8')
+        ).toMatchSnapshot();
+      });
     });
   });
 

packages/angular/src/generators/library/files/base/tsconfig.json__tpl__

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2022",
+    "target": "es2022"<% if (disableModernClassFieldsBehavior) { %>,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false<% } %>
   },
   "files": [],
   "include": [],

packages/angular/src/generators/library/lib/create-files.ts

@@ -6,7 +6,7 @@ import {
   offsetFromRoot,
 } from '@nx/devkit';
 import { getRootTsConfigFileName } from '@nx/js';
-import { parse } from 'semver';
+import { lt, parse } from 'semver';
 import { UnitTestRunner } from '../../../utils/test-runners';
 import type { AngularProjectConfiguration } from '../../../utils/types';
 import { getInstalledAngularVersion } from '../../utils/version-utils';
@@ -28,6 +28,7 @@ export function createFiles(
 
   const version = getInstalledAngularVersion(tree);
   const { major, minor } = parse(version);
+  const disableModernClassFieldsBehavior = lt(version, '18.1.0-rc.0');
 
   const substitutions = {
     libName: options.libraryOptions.name,
@@ -43,6 +44,7 @@ export function createFiles(
     importPath: options.libraryOptions.importPath,
     rootOffset,
     angularPeerDepVersion: `^${major}.${minor}.0`,
+    disableModernClassFieldsBehavior,
     tpl: '',
   };
 

packages/angular/src/generators/library/library.spec.ts

@@ -310,7 +310,6 @@ describe('lib', () => {
           noImplicitReturns: true,
           strict: true,
           target: 'es2022',
-          useDefineForClassFields: false,
         },
         files: [],
         include: [],
@@ -1772,4 +1771,25 @@ describe('lib', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('angular compat support', () => {
+    beforeEach(() => {
+      updateJson(tree, 'package.json', (json) => ({
+        ...json,
+        dependencies: {
+          ...json.dependencies,
+          '@angular/core': '~17.2.0',
+        },
+      }));
+    });
+
+    it('should disable modern class fields behavior', async () => {
+      await runLibraryGeneratorWithOpts();
+
+      expect(
+        readJson(tree, 'my-lib/tsconfig.json').compilerOptions
+          .useDefineForClassFields
+      ).toBe(false);
+    });
+  });
 });

packages/angular/src/generators/setup-mf/files/host-files/app.component.spec.ts__tmpl__

@@ -1,16 +1,19 @@
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { NxWelcomeComponent } from './nx-welcome.component';<% if(useRouterTestingModule) { %>
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterTestingModule } from '@angular/router/testing';<% } %>
-import { Router } from '@angular/router';
+import { Router<% if(!useRouterTestingModule) { %>, RouterModule<% } %> } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
+      imports: [<% if(useRouterTestingModule) { %>
         RouterTestingModule.withRoutes([
           { path: '', component: NxWelcomeComponent },
-        ]),<% if (standalone) { %>
+        ]),<% } %><% if(!useRouterTestingModule) { %>
+        RouterModule.forRoot([
+          { path: '', component: NxWelcomeComponent },
+        ]),<% } %><% if (standalone) { %>
         AppComponent,
         NxWelcomeComponent,<% } %>
       ],<% if (!standalone) { %>

packages/angular/src/generators/setup-mf/lib/add-remote-to-host.spec.ts

@@ -14,7 +14,7 @@ describe('Add remote to host', () => {
     const webpackAst = tsquery.ast(hostWebpackConfig);
     const mfRemotesNode = tsquery(
       webpackAst,
-      'Identifier[name=remotes] ~ ArrayLiteralExpression',
+      'ObjectLiteralExpression > PropertyAssignment:has(Identifier[name=remotes]) > ArrayLiteralExpression',
       { visitAllChildren: true }
     )[0] as ArrayLiteralExpression;
 

packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts

@@ -97,7 +97,7 @@ function addRemoteToStaticHost(
   const webpackAst = tsquery.ast(hostMFConfig);
   const mfRemotesNode = tsquery(
     webpackAst,
-    'Identifier[name=remotes] ~ ArrayLiteralExpression',
+    'ObjectLiteralExpression > PropertyAssignment:has(Identifier[name=remotes]) > ArrayLiteralExpression',
     { visitAllChildren: true }
   )[0] as ArrayLiteralExpression;
 

packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts

@@ -1,17 +1,14 @@
-import { Tree } from 'nx/src/generators/tree';
+import {
-import { readProjectConfiguration } from 'nx/src/generators/utils/project-configuration';
+  generateFiles,
-import { generateFiles, joinPathFragments, names } from '@nx/devkit';
+  joinPathFragments,
-import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
+  readProjectConfiguration,
+  type Tree,
+} from '@nx/devkit';
 import { addRoute } from '../../../utils/nx-devkit/route-utils';
-import { Schema } from '../schema';
+import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
-
+import type { Schema } from '../schema';
-let tsModule: typeof import('typescript');
 
 export function updateHostAppRoutes(tree: Tree, options: Schema) {
-  if (!tsModule) {
-    tsModule = ensureTypescript();
-  }
-
   const { sourceRoot } = readProjectConfiguration(tree, options.appName);
 
   tree.write(
@@ -38,13 +35,6 @@ export function updateHostAppRoutes(tree: Tree, options: Schema) {
     hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
   }
 
-  let sourceFile = tsModule.createSourceFile(
-    pathToHostRootRoutingFile,
-    hostRootRoutingFile,
-    tsModule.ScriptTarget.Latest,
-    true
-  );
-
   addRoute(
     tree,
     pathToHostRootRoutingFile,
@@ -60,6 +50,7 @@ export function updateHostAppRoutes(tree: Tree, options: Schema) {
 ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`
   );
 
+  const { major: angularMajorVersion } = getInstalledAngularVersionInfo(tree);
   generateFiles(
     tree,
     joinPathFragments(__dirname, '../files/host-files'),
@@ -67,6 +58,7 @@ ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`
     {
       appName: options.appName,
       standalone: options.standalone,
+      useRouterTestingModule: angularMajorVersion < 18,
       tmpl: '',
     }
   );

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

@@ -708,4 +708,121 @@ describe('Init MF', () => {
     const packageJson = readJson(tree, 'package.json');
     expect(packageJson).toEqual(initialPackageJson);
   });
+
+  it('should generate the host app component test file correctly', async () => {
+    await setupMf(tree, {
+      appName: 'app1',
+      mfType: 'host',
+      prefix: 'my-org',
+    });
+
+    expect(tree.read('app1/src/app/app.component.spec.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+      import { AppComponent } from './app.component';
+      import { NxWelcomeComponent } from './nx-welcome.component';
+      import { Router, RouterModule } from '@angular/router';
+
+      describe('AppComponent', () => {
+        beforeEach(async () => {
+          await TestBed.configureTestingModule({
+            imports: [
+              RouterModule.forRoot([{ path: '', component: NxWelcomeComponent }]),
+              AppComponent,
+              NxWelcomeComponent,
+            ],
+          }).compileComponents();
+        });
+
+        it('should create the app', () => {
+          const fixture = TestBed.createComponent(AppComponent);
+          const app = fixture.componentInstance;
+          expect(app).toBeTruthy();
+        });
+
+        it(\`should have as title 'app1'\`, () => {
+          const fixture = TestBed.createComponent(AppComponent);
+          const app = fixture.componentInstance;
+          expect(app.title).toEqual('app1');
+        });
+
+        it('should render title', fakeAsync(() => {
+          const fixture = TestBed.createComponent(AppComponent);
+          const router = TestBed.inject(Router);
+          fixture.ngZone?.run(() => router.navigate(['']));
+          tick();
+          fixture.detectChanges();
+          const compiled = fixture.nativeElement as HTMLElement;
+          expect(compiled.querySelector('h1')?.textContent).toContain('Welcome app1');
+        }));
+      });
+      "
+    `);
+  });
+
+  describe('angular compat support', () => {
+    beforeEach(() => {
+      updateJson(tree, 'package.json', (json) => ({
+        ...json,
+        dependencies: {
+          ...json.dependencies,
+          '@angular/core': '~17.2.0',
+        },
+      }));
+    });
+
+    it('should generate the host app component test file using RouterTestingModule', async () => {
+      await setupMf(tree, {
+        appName: 'app1',
+        mfType: 'host',
+        prefix: 'my-org',
+      });
+
+      expect(tree.read('app1/src/app/app.component.spec.ts', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+        import { AppComponent } from './app.component';
+        import { NxWelcomeComponent } from './nx-welcome.component';
+        import { RouterTestingModule } from '@angular/router/testing';
+        import { Router } from '@angular/router';
+
+        describe('AppComponent', () => {
+          beforeEach(async () => {
+            await TestBed.configureTestingModule({
+              imports: [
+                RouterTestingModule.withRoutes([
+                  { path: '', component: NxWelcomeComponent },
+                ]),
+                AppComponent,
+                NxWelcomeComponent,
+              ],
+            }).compileComponents();
+          });
+
+          it('should create the app', () => {
+            const fixture = TestBed.createComponent(AppComponent);
+            const app = fixture.componentInstance;
+            expect(app).toBeTruthy();
+          });
+
+          it(\`should have as title 'app1'\`, () => {
+            const fixture = TestBed.createComponent(AppComponent);
+            const app = fixture.componentInstance;
+            expect(app.title).toEqual('app1');
+          });
+
+          it('should render title', fakeAsync(() => {
+            const fixture = TestBed.createComponent(AppComponent);
+            const router = TestBed.inject(Router);
+            fixture.ngZone?.run(() => router.navigate(['']));
+            tick();
+            fixture.detectChanges();
+            const compiled = fixture.nativeElement as HTMLElement;
+            expect(compiled.querySelector('h1')?.textContent).toContain('Welcome app1');
+          }));
+        });
+        "
+      `);
+    });
+  });
 });

packages/angular/src/generators/utils/storybook-ast/component-info.ts

@@ -120,7 +120,7 @@ function getStandaloneComponents(tree: Tree, filePath: string): string[] {
   const ast = tsquery.ast(fileContent);
   const components = tsquery<Identifier>(
     ast,
-    'ClassDeclaration:has(Decorator > CallExpression:has(Identifier[name=Component]) ObjectLiteralExpression PropertyAssignment Identifier[name=standalone] ~ TrueKeyword) > Identifier',
+    'ClassDeclaration:has(Decorator > CallExpression:has(Identifier[name=Component]) ObjectLiteralExpression PropertyAssignment:has(Identifier[name=standalone]) > TrueKeyword) > Identifier',
     { visitAllChildren: true }
   );
 

packages/angular/src/migrations/update-14-2-0/update-router-initial-navigation.ts

@@ -18,6 +18,7 @@ import {
   factory,
   isIdentifier,
   isObjectLiteralExpression,
+  isPropertyAccessExpression,
   isPropertyAssignment,
   isStringLiteralLike,
 } from 'typescript';
@@ -128,13 +129,13 @@ function getRouterModuleForRootCall(
 
 function isRouterModuleForRoot(node: CallExpression): boolean {
   // make sure is not an outer call expression (NgModule call)
-  const routerModuleForRootIdentifier = tsquery(
+  return (
-    node.expression,
+    isPropertyAccessExpression(node.expression) &&
-    'CallExpression > PropertyAccessExpression > Identifier[name=RouterModule] ~ Identifier[name=forRoot]',
+    isIdentifier(node.expression.expression) &&
-    { visitAllChildren: true }
+    node.expression.expression.text === 'RouterModule' &&
-  )[0];
+    isIdentifier(node.expression.name) &&
-
+    node.expression.name.text === 'forRoot'
-  return !!routerModuleForRootIdentifier;
+  );
 }
 
 function needsMigration(node: PropertyAssignment): boolean {

packages/angular/src/migrations/update-14-2-0/update-tsconfig-target.ts

@@ -205,7 +205,7 @@ function getTsConfigFromJestConfig(
   const jestConfigAst = tsquery.ast(jestConfig);
   const tsJestTsConfigStringLiteral = tsquery(
     jestConfigAst,
-    'PropertyAssignment:has(Identifier[name=globals]) PropertyAssignment:has(StringLiteral[value=ts-jest]) PropertyAssignment Identifier[name=tsconfig] ~ StringLiteral',
+    'PropertyAssignment:has(Identifier[name=globals]) PropertyAssignment:has(StringLiteral[value=ts-jest]) PropertyAssignment:has(Identifier[name=tsconfig]) > StringLiteral',
     { visitAllChildren: true }
   )[0] as StringLiteral;
 

packages/angular/src/migrations/update-19-2-1/add-typescript-eslint-utils.ts

@@ -8,7 +8,7 @@ import {
   getInstalledPackageVersionInfo,
 } from '../../generators/utils/version-utils';
 
-export const typescriptEslintUtilsVersion = '^8.0.0-alpha.28';
+export const typescriptEslintUtilsVersion = '^7.16.0';
 
 export default async function (tree: Tree) {
   if (getInstalledPackageVersion(tree, '@typescript-eslint/utils')) {

packages/angular/src/migrations/update-19-5-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-19-5-0/update-angular-cli.ts

@@ -0,0 +1,23 @@
+import { formatFiles, Tree, updateJson } from '@nx/devkit';
+
+export const angularCliVersion = '~18.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,8 +1,8 @@
 export const nxVersion = require('../../package.json').version;
 
-export const angularVersion = '~18.0.0';
+export const angularVersion = '~18.1.0';
-export const angularDevkitVersion = '~18.0.0';
+export const angularDevkitVersion = '~18.1.0';
-export const ngPackagrVersion = '~18.0.0';
+export const ngPackagrVersion = '~18.1.0';
 export const ngrxVersion = '^18.0.0';
 export const rxjsVersion = '~7.8.0';
 export const zoneJsVersion = '~0.14.3';
@@ -18,7 +18,7 @@ export const moduleFederationNodeVersion = '^2.3.0';
 export const moduleFederationEnhancedVersion = '~0.2.3';
 
 export const angularEslintVersion = '^18.0.1';
-export const typescriptEslintVersion = '^8.0.0-alpha.28';
+export const typescriptEslintVersion = '^7.16.0';
 export const tailwindVersion = '^3.0.2';
 export const postcssVersion = '^8.4.5';
 export const postcssUrlVersion = '~10.1.3';

packages/devkit/src/utils/versions.ts

@@ -1 +1 @@
-export const typescriptVersion = '~5.4.2';
+export const typescriptVersion = '~5.5.2';

packages/eslint-plugin/package.json

@@ -36,8 +36,8 @@
   "dependencies": {
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",
-    "@typescript-eslint/type-utils": "^7.3.0",
+    "@typescript-eslint/type-utils": "^7.16.0",
-    "@typescript-eslint/utils": "^7.3.0",
+    "@typescript-eslint/utils": "^7.16.0",
     "chalk": "^4.1.0",
     "confusing-browser-globals": "^1.0.9",
     "jsonc-eslint-parser": "^2.1.0",

packages/eslint/migrations.json

@@ -138,6 +138,20 @@
           "version": "~8.57.0"
         }
       }
+    },
+    "19.5.0": {
+      "version": "19.5.0-beta.1",
+      "packages": {
+        "@typescript-eslint/parser": {
+          "version": "^7.16.0"
+        },
+        "@typescript-eslint/eslint-plugin": {
+          "version": "^7.16.0"
+        },
+        "@typescript-eslint/utils": {
+          "version": "^7.16.0"
+        }
+      }
     }
   }
 }

packages/eslint/src/utils/versions.ts

@@ -3,4 +3,4 @@ export const nxVersion = require('../../package.json').version;
 export const eslintVersion = '~8.57.0';
 export const eslintrcVersion = '^2.1.1';
 export const eslintConfigPrettierVersion = '^9.0.0';
-export const typescriptESLintVersion = '^7.3.0';
+export const typescriptESLintVersion = '^7.16.0';

packages/js/migrations.json

@@ -175,6 +175,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.5.1": {
+      "version": "19.5.0-beta.1",
+      "x-prompt": "Do you want to update to TypeScript v5.5?",
+      "requires": {
+        "typescript": ">=5.4.0 <5.5.0"
+      },
+      "packages": {
+        "typescript": {
+          "version": "~5.5.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/js/src/executors/tsc/lib/typescript-compilation.ts

@@ -158,14 +158,18 @@ function* compileTS(
 
     /**
      * This only applies when the deprecated `prepend` option is set to `true`.
+     * This was completely dropped in TS 5.5.
      * Skip support.
      */
-    if (project.kind === ts.InvalidatedProjectKind.UpdateBundle) {
+    if (
+      project.kind !== ts.InvalidatedProjectKind.Build &&
+      project.kind !== ts.InvalidatedProjectKind.UpdateOutputFileStamps
+    ) {
       logger.warn(
         `The project ${projectName} ` +
           `is using the deprecated "prepend" Typescript compiler option. ` +
           `This option is not supported by the batch executor and it's ignored.\n`,
-        project.project
+        (project as any).project
       );
       continue;
     }
@@ -310,9 +314,13 @@ function compileTSWithWatch(
 
       /**
        * This only applies when the deprecated `prepend` option is set to `true`.
+       * This was completely dropped in TS 5.5.
        * Skip support.
        */
-      if (project.kind === ts.InvalidatedProjectKind.UpdateBundle) {
+      if (
+        project.kind !== ts.InvalidatedProjectKind.Build &&
+        project.kind !== ts.InvalidatedProjectKind.UpdateOutputFileStamps
+      ) {
         logger.warn(
           `The project ${projectName} ` +
             `is using the deprecated "prepend" Typescript compiler option. ` +

packages/js/src/generators/init/init.spec.ts

@@ -105,14 +105,14 @@ describe('js init generator', () => {
 
   it('should not overwrite installed typescript version when is a supported version', async () => {
     updateJson(tree, 'package.json', (json) => {
-      json.devDependencies = { ...json.devDependencies, typescript: '~4.8.2' };
+      json.devDependencies = { ...json.devDependencies, typescript: '~4.9.3' };
       return json;
     });
 
     await init(tree, {});
 
     const packageJson = readJson(tree, 'package.json');
-    expect(packageJson.devDependencies['typescript']).toBe('~4.8.2');
+    expect(packageJson.devDependencies['typescript']).toBe('~4.9.3');
     expect(packageJson.devDependencies['typescript']).not.toBe(
       typescriptVersion
     );

packages/js/src/utils/versions.ts

@@ -11,10 +11,10 @@ export const typesNodeVersion = '18.16.9';
 export const verdaccioVersion = '^5.0.4';
 
 // Typescript
-export const typescriptVersion = '~5.4.2';
+export const typescriptVersion = '~5.5.2';
 /**
  * The minimum version is currently determined from the lowest version
  * that's supported by the lowest Angular supported version, e.g.
  * `npm view @angular/compiler-cli@14.0.0 peerDependencies.typescript`
  */
-export const supportedTypescriptVersions = '>=4.8.2';
+export const supportedTypescriptVersions = '>=4.9.3';

packages/nx/src/plugins/js/versions.ts

@@ -1 +1 @@
-export const typescriptVersion = '~5.4.2';
+export const typescriptVersion = '~5.5.2';

packages/remix/src/utils/versions.ts

@@ -9,7 +9,7 @@ export const reactDomVersion = '^18.2.0';
 export const typesReactVersion = '^18.2.0';
 export const typesReactDomVersion = '^18.2.0';
 export const eslintVersion = '^8.56.0';
-export const typescriptVersion = '^5.3.3';
+export const typescriptVersion = '~5.5.2';
 export const tailwindVersion = '^3.3.0';
 export const testingLibraryReactVersion = '^14.1.2';
 // TODO(colum): Unpin this when @testing-library/jest-dom pushes a fix

packages/rollup/tsconfig.lib.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "declaration": true,
-    "types": []
+    "types": ["node"]
   },
   "include": ["**/*.ts"],
   "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]

packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap

@@ -75,51 +75,6 @@ exports[`@nx/storybook:configuration for Storybook v7 basic functionalities shou
 "
 `;
 
-exports[`@nx/storybook:configuration for Storybook v7 dependencies should add angular related dependencies when using Angular as uiFramework 1`] = `
-{
-  "dependencies": {
-    "existing": "1.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tslib": "^2.3.0",
-  },
-  "devDependencies": {
-    "@angular/forms": "*",
-    "@nx/eslint": "0.0.1",
-    "@nx/eslint-plugin": "0.0.1",
-    "@nx/jest": "0.0.1",
-    "@nx/js": "0.0.1",
-    "@nx/storybook": "0.0.1",
-    "@nx/web": "0.0.1",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/angular": "^7.5.3",
-    "@storybook/core-server": "^7.5.3",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@swc-node/register": "~1.9.1",
-    "@swc/core": "~1.5.7",
-    "@swc/helpers": "~0.5.11",
-    "@types/jest": "^29.4.0",
-    "@types/node": "18.16.9",
-    "@typescript-eslint/eslint-plugin": "^7.3.0",
-    "@typescript-eslint/parser": "^7.3.0",
-    "eslint": "~8.57.0",
-    "eslint-config-prettier": "^9.0.0",
-    "existing": "1.0.0",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
-    "prettier": "^2.6.2",
-    "storybook": "^7.5.3",
-    "ts-jest": "^29.1.0",
-    "ts-node": "10.9.1",
-    "typescript": "~5.4.2",
-  },
-  "name": "@proj/source",
-}
-`;
-
 exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 1`] = `
 "const config = {
   stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -62,7 +62,6 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
       });
 
       const packageJson = readJson(tree, 'package.json');
-      expect(packageJson).toMatchSnapshot();
       // general deps
       expect(packageJson.dependencies[existing]).toBeDefined();
       expect(packageJson.devDependencies[existing]).toBeDefined();

packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap

@@ -177,8 +177,8 @@ exports[`lib should add vue, vite and vitest to package.json 1`] = `
     "@swc-node/register": "~1.9.1",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
-    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.3.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-vue": "^4.5.0",
     "@vitest/coverage-v8": "^1.0.4",
     "@vitest/ui": "^1.3.1",
@@ -190,7 +190,7 @@ exports[`lib should add vue, vite and vitest to package.json 1`] = `
     "eslint-plugin-vue": "^9.16.1",
     "jsdom": "~22.1.0",
     "prettier": "^2.6.2",
-    "typescript": "~5.4.2",
+    "typescript": "~5.5.2",
     "vite": "^5.0.0",
     "vitest": "^1.3.1",
     "vue-tsc": "^2.0.0",

packages/workspace/migrations.json

@@ -80,6 +80,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.5.1": {
+      "version": "19.5.0-beta.1",
+      "x-prompt": "Do you want to update to TypeScript v5.5?",
+      "requires": {
+        "typescript": ">=5.4.0 <5.5.0"
+      },
+      "packages": {
+        "typescript": {
+          "version": "~5.5.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/workspace/src/utils/versions.ts

@@ -1,7 +1,7 @@
 export const nxVersion = require('../../package.json').version;
 
-export const typescriptVersion = '~5.4.2';
+export const typescriptVersion = '~5.5.2';
 
 // TODO: remove when preset generation is reworked and
 // deps are not installed from workspace
-export const angularCliVersion = '~18.0.0';
+export const angularCliVersion = '~18.1.0';

scripts/angular-support-upgrades/build-migrations.ts

@@ -44,6 +44,7 @@ async function addMigrationPackageGroup(
         '@angular/cdk',
         '@angular/ssr',
         '@angular/pwa',
+        '@angular/build',
       ].includes(pkgName)
     ) {
       continue;

scripts/angular-support-upgrades/fetch-versions-from-registry.ts

@@ -9,6 +9,7 @@ const packagesToUpdate: PackageSpec[] = [
       '@angular-devkit/build-angular',
       '@angular-devkit/core',
       '@angular-devkit/schematics',
+      '@angular/build',
       '@angular/pwa',
       '@angular/ssr',
       '@schematics/angular',

scripts/angular-support-upgrades/init-upgrade.ts

@@ -41,12 +41,12 @@ async function run() {
   );
   updateVersionUtils(packageVersionMap);
 
-  console.log('⏳ - Formatting files...');
-  execSync('pnpm nx format', { stdio: 'inherit', encoding: 'utf8' });
-  console.log('✅ - Finished formatting files');
-
   console.log('⏳ - Installing packages...');
   execSync('pnpm install', { stdio: 'inherit', encoding: 'utf8' });
+  console.log('✅ - Finished installing packages!');
+
+  console.log('⏳ - Formatting files...');
+  execSync('pnpm nx format', { stdio: 'inherit', encoding: 'utf8' });
   console.log('✅ - Finished creating migrations!');
 }