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

## Current Behavior  Angular v18.1.0 is not supported. ## Expected Behavior  Angular v18.1.0 should be supported. ## Related Issue(s)  Fixes #
2024-07-11 17:17:00 +02:00 · 2024-07-11 17:17:00 +02:00 · 58ba1ffc6d
commit 58ba1ffc6d
parent 2c4c2ae8ca
53 changed files with 4245 additions and 2007 deletions
--- a/docs/generated/packages/angular/documents/angular-nx-version-matrix.md
+++ b/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                        |
--- a/docs/generated/packages/angular/executors/dev-server.json
+++ b/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": [
--- a/docs/shared/packages/angular/angular-nx-version-matrix.md
+++ b/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                        |
--- a/e2e/angular/src/projects.test.ts
+++ b/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";'
    );
  });

--- a/package.json
+++ b/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",
--- a/packages/angular/migrations.json
+++ b/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
+        }
+      }
    }
  }
 }
--- a/packages/angular/package.json
+++ b/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",
--- a/packages/angular/src/builders/dev-server/lib/validate-options.ts
+++ b/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.`);
+  }
 }
--- a/packages/angular/src/builders/dev-server/schema.d.ts
+++ b/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[];
--- a/packages/angular/src/builders/dev-server/schema.json
+++ b/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": [
--- a/packages/angular/src/generators/application/snapshots/application.spec.ts.snap
+++ b/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": [],
--- a/packages/angular/src/generators/application/application.spec.ts
+++ b/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,
--- a/packages/angular/src/generators/application/files/base/tsconfig.jsontpl
+++ b/packages/angular/src/generators/application/files/base/tsconfig.jsontpl
@ -1,7 +1,7 @@
 {
  "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": false<% if (isUsingApplicationBuilder) { %>,
+    "target": "es2022"<% if (disableModernClassFieldsBehavior) { %>,
+    "useDefineForClassFields": false<% } %><% if (isUsingApplicationBuilder) { %>,
    "esModuleInterop": true<% } %>
  },
  "files": [],
--- a/packages/angular/src/generators/application/files/ng-module/src/app/app.component.spec.tstpl
+++ b/packages/angular/src/generators/application/files/ng-module/src/app/app.component.spec.tstpl
@ -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 { RouterTestingModule } from '@angular/router/testing';<% } %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing && useRouterTestingModule) { %>
+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();
  });
--- a/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.spec.tstpl
+++ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.spec.tstpl
@ -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 { RouterTestingModule } from '@angular/router/testing';<% } %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing && useRouterTestingModule) { %>
+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();
  });

--- a/packages/angular/src/generators/application/lib/create-files.ts
+++ b/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: '',
  };

--- a/packages/angular/src/generators/host/snapshots/host.spec.ts.snap
+++ b/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 } from '@angular/router';
+import { Router, RouterModule } 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 } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';

 describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
-        RouterTestingModule.withRoutes([
+        RouterModule.forRoot([
          { path: '', component: NxWelcomeComponent },
        ]),
        AppComponent,
--- a/packages/angular/src/generators/host/host.spec.ts
+++ b/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();
+      });
    });
  });

--- a/packages/angular/src/generators/library/files/base/tsconfig.jsontpl
+++ b/packages/angular/src/generators/library/files/base/tsconfig.jsontpl
@ -1,7 +1,7 @@
 {
  "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": false
+    "target": "es2022"<% if (disableModernClassFieldsBehavior) { %>,
+    "useDefineForClassFields": false<% } %>
  },
  "files": [],
  "include": [],
--- a/packages/angular/src/generators/library/lib/create-files.ts
+++ b/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: '',
  };

--- a/packages/angular/src/generators/library/library.spec.ts
+++ b/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);
+    });
+  });
 });
--- a/packages/angular/src/generators/setup-mf/files/host-files/app.component.spec.tstmpl
+++ b/packages/angular/src/generators/setup-mf/files/host-files/app.component.spec.tstmpl
@ -1,16 +1,19 @@
 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';
+import { NxWelcomeComponent } from './nx-welcome.component';<% if(useRouterTestingModule) { %>
+import { RouterTestingModule } from '@angular/router/testing';<% } %>
+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) { %>
--- a/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.spec.ts
+++ b/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;

--- a/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts
+++ b/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;

--- a/packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts
+++ b/packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts
@ -1,17 +1,14 @@
-import { Tree } from 'nx/src/generators/tree';
-import { readProjectConfiguration } from 'nx/src/generators/utils/project-configuration';
-import { generateFiles, joinPathFragments, names } from '@nx/devkit';
-import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
+import {
+  generateFiles,
+  joinPathFragments,
+  readProjectConfiguration,
+  type Tree,
+} from '@nx/devkit';
 import { addRoute } from '../../../utils/nx-devkit/route-utils';
-import { Schema } from '../schema';
-
-let tsModule: typeof import('typescript');
+import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
+import type { Schema } from '../schema';

 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: '',
    }
  );
--- a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts
+++ b/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');
+          }));
+        });
+        "
+      `);
+    });
+  });
 });
--- a/packages/angular/src/generators/utils/storybook-ast/component-info.ts
+++ b/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 }
  );

--- a/packages/angular/src/migrations/update-14-2-0/update-router-initial-navigation.ts
+++ b/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(
-    node.expression,
-    'CallExpression > PropertyAccessExpression > Identifier[name=RouterModule] ~ Identifier[name=forRoot]',
-    { visitAllChildren: true }
-  )[0];
-
-  return !!routerModuleForRootIdentifier;
+  return (
+    isPropertyAccessExpression(node.expression) &&
+    isIdentifier(node.expression.expression) &&
+    node.expression.expression.text === 'RouterModule' &&
+    isIdentifier(node.expression.name) &&
+    node.expression.name.text === 'forRoot'
+  );
 }

 function needsMigration(node: PropertyAssignment): boolean {
--- a/packages/angular/src/migrations/update-14-2-0/update-tsconfig-target.ts
+++ b/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;

--- a/packages/angular/src/migrations/update-19-2-1/add-typescript-eslint-utils.ts
+++ b/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')) {
--- a/packages/angular/src/migrations/update-19-5-0/update-angular-cli.spec.ts
+++ b/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);
+  });
+});
--- a/packages/angular/src/migrations/update-19-5-0/update-angular-cli.ts
+++ b/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);
+  }
+}
--- a/packages/angular/src/utils/versions.ts
+++ b/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 angularDevkitVersion = '~18.0.0';
-export const ngPackagrVersion = '~18.0.0';
+export const angularVersion = '~18.1.0';
+export const angularDevkitVersion = '~18.1.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';
--- a/packages/devkit/src/utils/versions.ts
+++ b/packages/devkit/src/utils/versions.ts
@ -1 +1 @@
-export const typescriptVersion = '~5.4.2';
+export const typescriptVersion = '~5.5.2';
--- a/packages/eslint-plugin/package.json
+++ b/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/utils": "^7.3.0",
+    "@typescript-eslint/type-utils": "^7.16.0",
+    "@typescript-eslint/utils": "^7.16.0",
    "chalk": "^4.1.0",
    "confusing-browser-globals": "^1.0.9",
    "jsonc-eslint-parser": "^2.1.0",
--- a/packages/eslint/migrations.json
+++ b/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"
+        }
+      }
    }
  }
 }
--- a/packages/eslint/src/utils/versions.ts
+++ b/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';
--- a/packages/js/migrations.json
+++ b/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
+        }
+      }
    }
  }
 }
--- a/packages/js/src/executors/tsc/lib/typescript-compilation.ts
+++ b/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. ` +
--- a/packages/js/src/generators/init/init.spec.ts
+++ b/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
    );
--- a/packages/js/src/utils/versions.ts
+++ b/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';
--- a/packages/nx/src/plugins/js/versions.ts
+++ b/packages/nx/src/plugins/js/versions.ts
@ -1 +1 @@
-export const typescriptVersion = '~5.4.2';
+export const typescriptVersion = '~5.5.2';
--- a/packages/remix/src/utils/versions.ts
+++ b/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
--- a/packages/rollup/tsconfig.lib.json
+++ b/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"]
--- a/packages/storybook/src/generators/configuration/snapshots/configuration.spec.ts.snap
+++ b/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)'],
--- a/packages/storybook/src/generators/configuration/configuration.spec.ts
+++ b/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();
--- a/packages/vue/src/generators/library/snapshots/library.spec.ts.snap
+++ b/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/parser": "^7.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.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",
--- a/packages/workspace/migrations.json
+++ b/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
+        }
+      }
    }
  }
 }
--- a/packages/workspace/src/utils/versions.ts
+++ b/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';
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/angular-support-upgrades/build-migrations.ts
+++ b/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;
--- a/scripts/angular-support-upgrades/fetch-versions-from-registry.ts
+++ b/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',
--- a/scripts/angular-support-upgrades/init-upgrade.ts
+++ b/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!');
 }