feat(angular): support angular v19.0.0-rc.3 (#28953)

<!-- 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` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

<!-- This is the behavior we have today -->

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

<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

package.json

@@ -27,19 +27,19 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@angular-devkit/architect": "~0.1802.0",
-    "@angular-devkit/build-angular": "~18.2.0",
-    "@angular-devkit/core": "~18.2.0",
-    "@angular-devkit/schematics": "~18.2.0",
+    "@angular-devkit/architect": "~0.1900.0-rc.3",
+    "@angular-devkit/build-angular": "~19.0.0-rc.3",
+    "@angular-devkit/core": "~19.0.0-rc.3",
+    "@angular-devkit/schematics": "~19.0.0-rc.3",
     "@angular-eslint/eslint-plugin": "^18.3.0",
     "@angular-eslint/eslint-plugin-template": "^18.3.0",
     "@angular-eslint/template-parser": "^18.3.0",
-    "@angular/cli": "~18.2.0",
-    "@angular/common": "~18.2.0",
-    "@angular/compiler": "~18.2.0",
-    "@angular/compiler-cli": "~18.2.0",
-    "@angular/core": "~18.2.0",
-    "@angular/router": "~18.2.0",
+    "@angular/cli": "~19.0.0-rc.3",
+    "@angular/common": "~19.0.0-rc.3",
+    "@angular/compiler": "~19.0.0-rc.3",
+    "@angular/compiler-cli": "~19.0.0-rc.3",
+    "@angular/core": "~19.0.0-rc.3",
+    "@angular/router": "~19.0.0-rc.3",
     "@babel/core": "^7.23.2",
     "@babel/helper-create-regexp-features-plugin": "^7.22.9",
     "@babel/plugin-transform-runtime": "^7.23.2",
@@ -105,7 +105,7 @@
     "@rspack/dev-server": "1.0.5",
     "@rspack/plugin-minify": "^0.7.5",
     "@rspack/plugin-react-refresh": "^1.0.0",
-    "@schematics/angular": "~18.2.0",
+    "@schematics/angular": "~19.0.0-rc.3",
     "@storybook/addon-essentials": "^8.2.8",
     "@storybook/addon-interactions": "^8.2.8",
     "@storybook/core-server": "^8.2.8",
@@ -244,7 +244,7 @@
     "mini-css-extract-plugin": "~2.4.7",
     "minimatch": "9.0.3",
     "next-sitemap": "^3.1.10",
-    "ng-packagr": "~18.2.0",
+    "ng-packagr": "~19.0.0-rc.0",
     "node-fetch": "^2.6.7",
     "npm-package-arg": "11.0.1",
     "nuxt": "^3.10.0",

packages/angular/migrations.json

@@ -272,6 +272,15 @@
       "version": "20.2.0-beta.2",
       "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
       "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package"
+    },
+    "update-angular-cli-version-19-0-0-rc-3": {
+      "cli": "nx",
+      "version": "20.2.0-beta.3",
+      "requires": {
+        "@angular/core": ">=19.0.0-rc.3"
+      },
+      "description": "Update the @angular/cli package version to ~19.0.0-rc.3.",
+      "factory": "./src/migrations/update-20-2-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1164,6 +1173,67 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.2.0": {
+      "version": "20.2.0-beta.3",
+      "x-prompt": "Do you want to update the Angular version to v19?",
+      "requires": {
+        "@angular/core": ">=18.2.0 <19.0.0-rc.3"
+      },
+      "packages": {
+        "@angular-devkit/build-angular": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/build": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/pwa": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/ssr": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/architect": {
+          "version": "~0.1900.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1900.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~19.0.0-rc.3",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~19.0.0-rc.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/src/executors/application/application.impl.ts

@@ -42,7 +42,6 @@ export default async function* applicationExecutor(
     ? await loadIndexHtmlTransformer(indexHtmlTransformerPath, options.tsConfig)
     : undefined;
 
-  const { buildApplication } = await import('@angular-devkit/build-angular');
   const builderContext = await createBuilderContext(
     {
       builderName: 'application',
@@ -54,12 +53,14 @@ export default async function* applicationExecutor(
 
   const { version: angularVersion } = getInstalledAngularVersionInfo();
   if (gte(angularVersion, '17.1.0')) {
+    const { buildApplication } = await import('@angular-devkit/build-angular');
     return yield* buildApplication(delegateExecutorOptions, builderContext, {
       codePlugins: plugins,
       indexHtmlTransformer,
     });
   }
 
+  const { buildApplication } = require('@angular-devkit/build-angular');
   return yield* buildApplication(
     delegateExecutorOptions,
     builderContext,

packages/angular/src/executors/extract-i18n/extract-i18n.impl.ts

@@ -56,7 +56,9 @@ export default async function* extractI18nExecutor(
 function getDelegateBuilderOptions(
   options: ExtractI18nExecutorOptions
 ): ExtractI18nBuilderOptions {
-  const delegateBuilderOptions: ExtractI18nBuilderOptions = { ...options };
+  const delegateBuilderOptions: ExtractI18nBuilderOptions & {
+    browserTarget?: string;
+  } = { ...options };
 
   const { major: angularMajorVersion } = getInstalledAngularVersionInfo();
   if (angularMajorVersion <= 17) {

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

@@ -0,0 +1,23 @@
+import { formatFiles, Tree, updateJson } from '@nx/devkit';
+
+export const angularCliVersion = '~19.0.0-rc.3';
+
+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.2.0';
-export const angularDevkitVersion = '~18.2.0';
-export const ngPackagrVersion = '~18.2.0';
+export const angularVersion = '~19.0.0-rc.3';
+export const angularDevkitVersion = '~19.0.0-rc.3';
+export const ngPackagrVersion = '~19.0.0-rc.0';
 export const ngrxVersion = '^18.0.2';
 export const rxjsVersion = '~7.8.0';
 export const zoneJsVersion = '~0.14.3';

packages/workspace/src/utils/versions.ts

@@ -4,4 +4,4 @@ export const typescriptVersion = '~5.5.2';
 
 // TODO: remove when preset generation is reworked and
 // deps are not installed from workspace
-export const angularCliVersion = '~18.2.0';
+export const angularCliVersion = '~19.0.0-rc.3';