feat(angular): support angular 18.0.0-rc.2

package.json

@@ -26,19 +26,19 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@angular-devkit/architect": "~0.1800.0-next.3",
-    "@angular-devkit/build-angular": "~18.0.0-next.3",
-    "@angular-devkit/core": "~18.0.0-next.3",
-    "@angular-devkit/schematics": "~18.0.0-next.3",
+    "@angular-devkit/architect": "~0.1800.0-rc.2",
+    "@angular-devkit/build-angular": "~18.0.0-rc.2",
+    "@angular-devkit/core": "~18.0.0-rc.2",
+    "@angular-devkit/schematics": "~18.0.0-rc.2",
     "@angular-eslint/eslint-plugin": "~17.3.0",
     "@angular-eslint/eslint-plugin-template": "~17.3.0",
     "@angular-eslint/template-parser": "~17.3.0",
-    "@angular/cli": "~18.0.0-next.3",
-    "@angular/common": "~18.0.0-next.5",
-    "@angular/compiler": "~18.0.0-next.5",
-    "@angular/compiler-cli": "~18.0.0-next.5",
-    "@angular/core": "~18.0.0-next.5",
-    "@angular/router": "~18.0.0-next.5",
+    "@angular/cli": "~18.0.0-rc.2",
+    "@angular/common": "~18.0.0-rc.0",
+    "@angular/compiler": "~18.0.0-rc.0",
+    "@angular/compiler-cli": "~18.0.0-rc.0",
+    "@angular/core": "~18.0.0-rc.0",
+    "@angular/router": "~18.0.0-rc.0",
     "@babel/core": "^7.23.2",
     "@babel/helper-create-regexp-features-plugin": "^7.22.9",
     "@babel/plugin-transform-runtime": "^7.23.2",
@@ -93,7 +93,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-next.3",
+    "@schematics/angular": "~18.0.0-rc.2",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/core-server": "7.5.3",
     "@storybook/react": "7.5.3",
@@ -227,7 +227,7 @@
     "mini-css-extract-plugin": "~2.4.7",
     "minimatch": "9.0.3",
     "next-sitemap": "^3.1.10",
-    "ng-packagr": "~18.0.0-next.3",
+    "ng-packagr": "~18.0.0-rc.0",
     "node-fetch": "^2.6.7",
     "npm-package-arg": "11.0.1",
     "nuxt": "^3.10.0",

packages/angular/migrations.json

@@ -387,14 +387,14 @@
       "description": "Update the @angular/cli package version to ~17.3.0.",
       "factory": "./src/migrations/update-18-2-0/update-angular-cli"
     },
-    "update-angular-cli-version-18-0-0-next-3": {
+    "update-angular-cli-version-18-0-0-rc-2": {
       "cli": "nx",
-      "version": "19.1.0-beta.0",
+      "version": "19.2.0-beta.0",
       "requires": {
-        "@angular/core": ">=18.0.0-next.5"
+        "@angular/core": ">=18.0.0-rc.0"
       },
-      "description": "Update the @angular/cli package version to ~18.0.0-next.3.",
-      "factory": "./src/migrations/update-19-1-0/update-angular-cli"
+      "description": "Update the @angular/cli package version to ~18.0.0-rc.2.",
+      "factory": "./src/migrations/update-19-2-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1815,59 +1815,59 @@
         }
       }
     },
-    "19.1.0": {
-      "version": "19.1.0-beta.0",
+    "19.2.0": {
+      "version": "19.2.0-beta.0",
       "x-prompt": "Do you want to update the Angular version to v18?",
       "requires": {
-        "@angular/core": ">=17.3.0 <18.0.0-next.5"
+        "@angular/core": ">=17.3.0 <18.0.0-rc.0"
       },
       "packages": {
         "@angular-devkit/build-angular": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular-devkit/core": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular-devkit/schematics": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular/pwa": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular/ssr": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@schematics/angular": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular-devkit/architect": {
-          "version": "~0.1800.0-next.3",
+          "version": "~0.1800.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular-devkit/build-webpack": {
-          "version": "~0.1800.0-next.3",
+          "version": "~0.1800.0-rc.2",
           "alwaysAddToPackageJson": false
         },
         "@angular/core": {
-          "version": "~18.0.0-next.5",
+          "version": "~18.0.0-rc.0",
           "alwaysAddToPackageJson": true
         },
         "@angular/material": {
-          "version": "~18.0.0-next.5",
+          "version": "~18.0.0-rc.0",
           "alwaysAddToPackageJson": false
         },
         "@angular/cdk": {
-          "version": "~18.0.0-next.5",
+          "version": "~18.0.0-rc.0",
           "alwaysAddToPackageJson": false
         },
         "ng-packagr": {
-          "version": "~18.0.0-next.3",
+          "version": "~18.0.0-rc.0",
           "alwaysAddToPackageJson": false
         }
       }

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

@@ -10,11 +10,12 @@ import {
 } from '../utilities/esbuild-extensions';
 import type { ApplicationExecutorOptions } from './schema';
 import { validateOptions } from './utils/validate-options';
+import type { buildApplication as buildApplicationFn } from '@angular-devkit/build-angular';
 
 export default async function* applicationExecutor(
   options: ApplicationExecutorOptions,
   context: ExecutorContext
-) {
+): ReturnType<typeof buildApplicationFn> {
   validateOptions(options);
 
   const {
@@ -46,7 +47,7 @@ export default async function* applicationExecutor(
     {
       builderName: 'application',
       description: 'Build an application.',
-      optionSchema: await import('./schema.json'),
+      optionSchema: require('./schema.json'),
     },
     context
   );

packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts

@@ -1,3 +1,4 @@
+import type { buildEsbuildBrowser as buildEsbuildBrowserFn } from '@angular-devkit/build-angular/src/builders/browser-esbuild';
 import { stripIndents, type ExecutorContext } from '@nx/devkit';
 import type { DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils';
 import { createBuilderContext } from 'nx/src/adapter/ngcli-adapter';
@@ -9,7 +10,7 @@ import type { EsBuildSchema } from './schema';
 export default async function* esbuildExecutor(
   options: EsBuildSchema,
   context: ExecutorContext
-) {
+): ReturnType<typeof buildEsbuildBrowserFn> {
   if (options.plugins) {
     const { major: angularMajorVersion, version: angularVersion } =
       getInstalledAngularVersionInfo();
@@ -42,16 +43,14 @@ export default async function* esbuildExecutor(
   const plugins = await loadPlugins(pluginPaths, options.tsConfig);
 
   const { buildEsbuildBrowser } = await import(
-    '@angular-devkit/build-angular/src/builders/browser-esbuild/index'
+    '@angular-devkit/build-angular/src/builders/browser-esbuild'
   );
 
   const builderContext = await createBuilderContext(
     {
       builderName: 'browser-esbuild',
       description: 'Build a browser application',
-      optionSchema: await import(
-        '@angular-devkit/build-angular/src/builders/browser-esbuild/schema.json'
-      ),
+      optionSchema: require('@angular-devkit/build-angular/src/builders/browser-esbuild/schema.json'),
     },
     context
   );

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

@@ -29,7 +29,7 @@ export default async function* extractI18nExecutor(
     {
       builderName: 'extrct-i18n',
       description: 'Extracts i18n messages from source code.',
-      optionSchema: await import('./schema.json'),
+      optionSchema: require('./schema.json'),
     },
     context
   );

packages/angular/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts

@@ -66,9 +66,7 @@ export async function* moduleFederationDevServerExecutor(
             {
               builderName: '@nx/angular:webpack-browser',
               description: 'Build a browser application',
-              optionSchema: await import(
-                '../../builders/webpack-browser/schema.json'
-              ),
+              optionSchema: require('../../builders/webpack-browser/schema.json'),
             },
             context
           )

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-packagr.ts

@@ -8,13 +8,13 @@ export async function getNgPackagrInstance(
   const { major: angularMajorVersion } = getInstalledAngularVersionInfo();
   if (angularMajorVersion >= 17) {
     const { WRITE_BUNDLES_TRANSFORM } = await import(
-      './v17+/ng-package/entry-point/write-bundles.di'
+      './v17+/ng-package/entry-point/write-bundles.di.js'
     );
     const { WRITE_PACKAGE_TRANSFORM } = await import(
-      './v17+/ng-package/entry-point/write-package.di'
+      './v17+/ng-package/entry-point/write-package.di.js'
     );
     const { STYLESHEET_PROCESSOR } = await import(
-      '../../utilities/ng-packagr/stylesheet-processor.di'
+      '../../utilities/ng-packagr/stylesheet-processor.di.js'
     );
 
     const packagr = ngPackagr();
@@ -28,11 +28,13 @@ export async function getNgPackagrInstance(
   }
 
   const { NX_ENTRY_POINT_PROVIDERS } = await import(
-    './pre-v17/ng-package/entry-point/entry-point.di'
+    './pre-v17/ng-package/entry-point/entry-point.di.js'
+  );
+  const { nxProvideOptions } = await import(
+    './pre-v17/ng-package/options.di.js'
   );
-  const { nxProvideOptions } = await import('./pre-v17/ng-package/options.di');
   const { NX_PACKAGE_PROVIDERS, NX_PACKAGE_TRANSFORM } = await import(
-    './pre-v17/ng-package/package.di'
+    './pre-v17/ng-package/package.di.js'
   );
 
   const packagr = new NgPackagr([

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/pre-v17/ngc/compile-source-files.ts

@@ -6,10 +6,6 @@
  * - Support Angular Compiler `incrementalDriver` for Angular < 16.
  */
 
-import type {
-  CompilerOptions,
-  ParsedConfiguration,
-} from '@angular/compiler-cli';
 import { BuildGraph } from 'ng-packagr/lib/graph/build-graph';
 import {
   EntryPointNode,
@@ -25,21 +21,23 @@ import * as log from 'ng-packagr/lib/utils/log';
 import { join } from 'node:path';
 import * as ts from 'typescript';
 import { getInstalledAngularVersionInfo } from '../../../../utilities/angular-version-utils';
-import { ngCompilerCli } from '../../../../utilities/ng-compiler-cli';
+import { loadEsmModule } from '../../../../utilities/module-loader';
 import { NgPackagrOptions } from '../ng-package/options.di';
 import { StylesheetProcessor } from '../styles/stylesheet-processor';
 
 export async function compileSourceFiles(
   graph: BuildGraph,
-  tsConfig: ParsedConfiguration,
+  tsConfig: any,
   moduleResolutionCache: ts.ModuleResolutionCache,
   options: NgPackagrOptions,
-  extraOptions?: Partial<CompilerOptions>,
+  extraOptions?: Partial<ts.CompilerOptions>,
   stylesheetProcessor?: StylesheetProcessor
 ) {
-  const { NgtscProgram, formatDiagnostics } = await ngCompilerCli();
+  const { NgtscProgram, formatDiagnostics } = await loadEsmModule(
+    '@angular/compiler-cli'
+  );
   const { cacheDirectory, watch, cacheEnabled } = options;
-  const tsConfigOptions: CompilerOptions = {
+  const tsConfigOptions: ts.CompilerOptions = {
     ...tsConfig.options,
     ...extraOptions,
   };

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/pre-v17/styles/stylesheet-processor.ts

@@ -6,7 +6,7 @@
  * - Added PostCSS plugin needed to support TailwindCSS.
  */
 
-import * as browserslist from 'browserslist';
+import browserslist from 'browserslist';
 import { existsSync } from 'fs';
 import {
   generateKey,
@@ -15,7 +15,7 @@ import {
 } from 'ng-packagr/lib/utils/cache';
 import * as log from 'ng-packagr/lib/utils/log';
 import { dirname, extname, join } from 'path';
-import * as autoprefixer from 'autoprefixer';
+import autoprefixer from 'autoprefixer';
 import * as postcssUrl from 'postcss-url';
 import { pathToFileURL } from 'node:url';
 import {

packages/angular/src/executors/package/ng-packagr-adjustments/ng-package/entry-point/compile-ngc.transform.ts

@@ -19,7 +19,7 @@ import {
   PackageNode,
 } from 'ng-packagr/lib/ng-package/nodes';
 import { setDependenciesTsConfigPaths } from 'ng-packagr/lib/ts/tsconfig';
-import * as ora from 'ora';
+import ora from 'ora';
 import * as path from 'path';
 import * as ts from 'typescript';
 import { getInstalledAngularVersionInfo } from '../../../../utilities/angular-version-utils';

packages/angular/src/executors/package/ng-packagr-adjustments/ng-packagr.ts

@@ -8,7 +8,7 @@ export async function getNgPackagrInstance(
   const { major: angularMajorVersion } = getInstalledAngularVersionInfo();
   if (angularMajorVersion >= 17) {
     const { STYLESHEET_PROCESSOR } = await import(
-      '../../utilities/ng-packagr/stylesheet-processor.di'
+      '../../utilities/ng-packagr/stylesheet-processor.di.js'
     );
 
     const packagr = ngPackagr();
@@ -17,11 +17,11 @@ export async function getNgPackagrInstance(
   }
 
   const { NX_ENTRY_POINT_PROVIDERS } = await import(
-    './ng-package/entry-point/entry-point.di'
+    './ng-package/entry-point/entry-point.di.js'
   );
-  const { nxProvideOptions } = await import('./ng-package/options.di');
+  const { nxProvideOptions } = await import('./ng-package/options.di.js');
   const { NX_PACKAGE_PROVIDERS, NX_PACKAGE_TRANSFORM } = await import(
-    './ng-package/package.di'
+    './ng-package/package.di.js'
   );
 
   const packagr = new NgPackagr([

packages/angular/src/executors/package/ng-packagr-adjustments/ngc/compile-source-files.ts

@@ -7,10 +7,6 @@
  * - Support Angular Compiler `incrementalDriver` for Angular < 16.
  */
 
-import type {
-  CompilerOptions,
-  ParsedConfiguration,
-} from '@angular/compiler-cli';
 import { BuildGraph } from 'ng-packagr/lib/graph/build-graph';
 import {
   EntryPointNode,
@@ -26,22 +22,24 @@ import {
 import { join } from 'node:path';
 import * as ts from 'typescript';
 import { getInstalledAngularVersionInfo } from '../../../utilities/angular-version-utils';
-import { ngCompilerCli } from '../../../utilities/ng-compiler-cli';
+import { loadEsmModule } from '../../../utilities/module-loader';
 import { NgPackagrOptions } from '../ng-package/options.di';
 import { StylesheetProcessor } from '../styles/stylesheet-processor';
 
 export async function compileSourceFiles(
   graph: BuildGraph,
-  tsConfig: ParsedConfiguration,
+  tsConfig: any,
   moduleResolutionCache: ts.ModuleResolutionCache,
   options: NgPackagrOptions,
-  extraOptions?: Partial<CompilerOptions>,
+  extraOptions?: Partial<ts.CompilerOptions>,
   stylesheetProcessor?: StylesheetProcessor,
   ngccProcessor?: any
 ) {
-  const { NgtscProgram, formatDiagnostics } = await ngCompilerCli();
+  const { NgtscProgram, formatDiagnostics } = await loadEsmModule(
+    '@angular/compiler-cli'
+  );
   const { cacheDirectory, watch, cacheEnabled } = options;
-  const tsConfigOptions: CompilerOptions = {
+  const tsConfigOptions: ts.CompilerOptions = {
     ...tsConfig.options,
     ...extraOptions,
   };