@nx/angular 18.0.4 → 18.1.0-beta.1

package/executors.d.ts

@@ -7,6 +7,7 @@ export * from './src/executors/ng-packagr-lite/ng-packagr-lite.impl';
 export * from './src/executors/package/package.impl';
 export * from './src/executors/browser-esbuild/browser-esbuild.impl';
 export * from './src/executors/application/application.impl';
+export * from './src/executors/extract-i18n/extract-i18n.impl';
 import { executeDevServerBuilder } from './src/builders/dev-server/dev-server.impl';
 export { 
 /**

package/executors.js

@@ -11,6 +11,7 @@ tslib_1.__exportStar(require("./src/executors/ng-packagr-lite/ng-packagr-lite.im
 tslib_1.__exportStar(require("./src/executors/package/package.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/browser-esbuild/browser-esbuild.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/application/application.impl"), exports);
+tslib_1.__exportStar(require("./src/executors/extract-i18n/extract-i18n.impl"), exports);
 const dev_server_impl_1 = require("./src/builders/dev-server/dev-server.impl");
 Object.defineProperty(exports, "executeWebpackDevServerBuilder", { enumerable: true, get: function () { return dev_server_impl_1.executeDevServerBuilder; } });
 Object.defineProperty(exports, "executeDevServerBuilder", { enumerable: true, get: function () { return dev_server_impl_1.executeDevServerBuilder; } });

package/executors.json

@@ -29,6 +29,11 @@
       "implementation": "./src/executors/application/application.impl",
       "schema": "./src/executors/application/schema.json",
       "description": "Builds an application with esbuild with support for incremental builds. _Note: this is only supported in Angular versions >= 17.0.0_."
+    },
+    "extract-i18n": {
+      "implementation": "./src/executors/extract-i18n/extract-i18n.impl",
+      "schema": "./src/executors/extract-i18n/schema.json",
+      "description": "Extracts i18n messages from source code."
     }
   },
   "builders": {

package/migrations.json

@@ -362,6 +362,15 @@
       "version": "18.0.0-beta.0",
       "description": "Add NX_MF_DEV_SERVER_STATIC_REMOTES to inputs for task hashing when '@nx/angular:webpack-browser' is used for Module Federation.",
       "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
+    },
+    "update-angular-cli-version-17-2-0": {
+      "cli": "nx",
+      "version": "18.1.0-beta.1",
+      "requires": {
+        "@angular/core": ">=17.2.0"
+      },
+      "description": "Update the @angular/cli package version to ~17.2.0.",
+      "factory": "./src/migrations/update-18-1-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1630,6 +1639,75 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "18.1.0-jest": {
+      "version": "18.1.0-beta.1",
+      "requires": {
+        "@angular-devkit/build-angular": ">=15.0.0 <18.0.0",
+        "@angular/compiler-cli": ">=15.0.0 <18.0.0",
+        "@angular/core": ">=15.0.0 <18.0.0",
+        "@angular/platform-browser-dynamic": ">=15.0.0 <18.0.0",
+        "jest": "^29.0.0"
+      },
+      "packages": {
+        "jest-preset-angular": {
+          "version": "~14.0.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "18.1.0": {
+      "version": "18.1.0-beta.1",
+      "packages": {
+        "@angular-devkit/build-angular": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/pwa": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/ssr": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/architect": {
+          "version": "~0.1702.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1702.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~17.2.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "18.0.4",
+  "version": "18.1.0-beta.1",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -78,16 +78,16 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "18.0.4",
-    "@nx/cypress": "18.0.4",
-    "@nx/jest": "18.0.4",
-    "@nx/js": "18.0.4",
-    "@nx/eslint": "18.0.4",
-    "@nx/webpack": "18.0.4",
-    "@nx/web": "18.0.4",
-    "@nx/workspace": "18.0.4",
+    "@nx/devkit": "18.1.0-beta.1",
+    "@nx/cypress": "18.1.0-beta.1",
+    "@nx/jest": "18.1.0-beta.1",
+    "@nx/js": "18.1.0-beta.1",
+    "@nx/eslint": "18.1.0-beta.1",
+    "@nx/webpack": "18.1.0-beta.1",
+    "@nx/web": "18.1.0-beta.1",
+    "@nx/workspace": "18.1.0-beta.1",
     "piscina": "^4.2.1",
-    "@nrwl/angular": "18.0.4"
+    "@nrwl/angular": "18.1.0-beta.1"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/src/builders/dev-server/dev-server.impl.js

@@ -12,6 +12,7 @@ const rxjs_1 = require("rxjs");
 const operators_2 = require("rxjs/operators");
 const angular_version_utils_1 = require("../../executors/utilities/angular-version-utils");
 const esbuild_extensions_1 = require("../../executors/utilities/esbuild-extensions");
+const patch_builder_context_1 = require("../../executors/utilities/patch-builder-context");
 const buildable_libs_1 = require("../utilities/buildable-libs");
 const webpack_1 = require("../utilities/webpack");
 const lib_1 = require("./lib");
@@ -95,7 +96,7 @@ function executeDevServerBuilder(rawOptions, context) {
      * builders. Since we are using a custom builder, we patch the context to
      * handle `@nx/angular:*` executors.
      */
-    patchBuilderContext(context, !isUsingWebpackBuilder, parsedBuildTarget);
+    (0, patch_builder_context_1.patchBuilderContext)(context, !isUsingWebpackBuilder, parsedBuildTarget);
     return (0, rxjs_1.combineLatest)([
         (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))),
         (0, rxjs_1.from)((0, esbuild_extensions_1.loadPlugins)(buildTargetOptions.plugins, buildTargetOptions.tsConfig)),
@@ -157,40 +158,3 @@ async function loadIndexHtmlFileTransformer(pathToIndexFileTransformer, tsConfig
         ? (0, webpack_1.resolveIndexHtmlTransformer)(pathToIndexFileTransformer, tsConfig, context.target)
         : await (0, esbuild_extensions_1.loadIndexHtmlTransformer)(pathToIndexFileTransformer, tsConfig);
 }
-const executorToBuilderMap = new Map([
-    [
-        '@nx/angular:browser-esbuild',
-        '@angular-devkit/build-angular:browser-esbuild',
-    ],
-    ['@nx/angular:application', '@angular-devkit/build-angular:application'],
-]);
-function patchBuilderContext(context, isUsingEsbuildBuilder, buildTarget) {
-    const originalGetBuilderNameForTarget = context.getBuilderNameForTarget;
-    context.getBuilderNameForTarget = async (target) => {
-        const builderName = await originalGetBuilderNameForTarget(target);
-        if (executorToBuilderMap.has(builderName)) {
-            return executorToBuilderMap.get(builderName);
-        }
-        return builderName;
-    };
-    if (isUsingEsbuildBuilder) {
-        const originalGetTargetOptions = context.getTargetOptions;
-        context.getTargetOptions = async (target) => {
-            const options = await originalGetTargetOptions(target);
-            if (target.project === buildTarget.project &&
-                target.target === buildTarget.target &&
-                target.configuration === buildTarget.configuration) {
-                cleanBuildTargetOptions(options);
-            }
-            return options;
-        };
-    }
-}
-function cleanBuildTargetOptions(options) {
-    delete options.buildLibsFromSource;
-    delete options.customWebpackConfig;
-    delete options.indexHtmlTransformer;
-    delete options.indexFileTransformer;
-    delete options.plugins;
-    return options;
-}

package/src/builders/dev-server/lib/validate-options.js

@@ -14,5 +14,9 @@ function validateOptions(options) {
         throw new Error((0, devkit_1.stripIndents) `The "esbuildMiddleware" option is only supported in Angular >= 17.0.0. You are currently using "${angularVersion}".
       You can resolve this error by removing the "esbuildMiddleware" option or by migrating to Angular 17.0.0.`);
     }
+    if ((0, semver_1.lt)(angularVersion, '17.2.0') && options.prebundle) {
+        throw new Error((0, devkit_1.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.`);
+    }
 }
 exports.validateOptions = validateOptions;

package/src/builders/dev-server/schema.d.ts

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

package/src/builders/dev-server/schema.json

@@ -116,6 +116,24 @@
       "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
     },
+    "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": [
+        { "type": "boolean" },
+        {
+          "type": "object",
+          "properties": {
+            "exclude": {
+              "description": "List of package imports that should not be prebundled by the development server. The packages will be bundled into the application code itself.",
+              "type": "array",
+              "items": { "type": "string" }
+            }
+          },
+          "additionalProperties": false,
+          "required": ["exclude"]
+        }
+      ]
+    },
     "buildLibsFromSource": {
       "type": "boolean",
       "description": "Read buildable libraries from source instead of building them separately. If not set, it will take the value specified in the `browserTarget` options, or it will default to `true` if it's also not set in the `browserTarget` options.",

package/src/executors/application/application.impl.js

@@ -8,7 +8,7 @@ const esbuild_extensions_1 = require("../utilities/esbuild-extensions");
 const validate_options_1 = require("./utils/validate-options");
 async function* applicationExecutor(options, context) {
     (0, validate_options_1.validateOptions)(options);
-    const { buildLibsFromSource = true, plugins: pluginPaths, ...delegateExecutorOptions } = options;
+    const { buildLibsFromSource = true, plugins: pluginPaths, indexHtmlTransformer: indexHtmlTransformerPath, ...delegateExecutorOptions } = options;
     let dependencies;
     if (!buildLibsFromSource) {
         const { tsConfigPath, dependencies: foundDependencies } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(delegateExecutorOptions.tsConfig, context);
@@ -16,8 +16,8 @@ async function* applicationExecutor(options, context) {
         delegateExecutorOptions.tsConfig = tsConfigPath;
     }
     const plugins = await (0, esbuild_extensions_1.loadPlugins)(pluginPaths, options.tsConfig);
-    const indexHtmlTransformer = options.indexHtmlTransformer
-        ? await (0, esbuild_extensions_1.loadIndexHtmlTransformer)(options.indexHtmlTransformer, options.tsConfig)
+    const indexHtmlTransformer = indexHtmlTransformerPath
+        ? await (0, esbuild_extensions_1.loadIndexHtmlTransformer)(indexHtmlTransformerPath, options.tsConfig)
         : undefined;
     const { buildApplication } = await Promise.resolve().then(() => require('@angular-devkit/build-angular'));
     const builderContext = await (0, ngcli_adapter_1.createBuilderContext)({

package/src/executors/application/schema.json

@@ -135,6 +135,11 @@
       },
       "default": []
     },
+    "clearScreen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Automatically clear the terminal screen during rebuilds. _Note: this is only supported in Angular versions >= 17.2.0_."
+    },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "default": true,
@@ -213,6 +218,13 @@
         "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
       }
     },
+    "define": {
+      "description": "Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries. The value will be used directly. String values must be put in quotes. Identifiers within Angular metadata such as Component Decorators will not be replaced. _Note: this is only supported in Angular versions >= 17.2.0_.",
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
     "fileReplacements": {
       "description": "Replace compilation source files with other compilation source files in the build.",
       "type": "array",

package/src/executors/application/utils/validate-options.js

@@ -8,32 +8,40 @@ function validateOptions(options) {
     if (angularMajorVersion < 17) {
         throw new Error(`The "application" executor requires Angular version 17 or greater. You are currently using version ${angularVersion}.`);
     }
-    if (options.loader && (0, semver_1.lt)(angularVersion, '17.1.0')) {
-        throw new Error(`The "loader" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
-    }
-    if (options.indexHtmlTransformer && (0, semver_1.lt)(angularVersion, '17.1.0')) {
-        throw new Error(`The "indexHtmlTransformer" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
-    }
-    if (typeof options.index === 'object' &&
-        options.index.preloadInitial !== undefined &&
-        (0, semver_1.lt)(angularVersion, '17.1.0')) {
-        throw new Error(`The "index.preloadInitial" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
-    }
-    if (options.optimization &&
-        typeof options.optimization !== 'boolean' &&
-        options.optimization.styles &&
-        typeof options.optimization.styles !== 'boolean' &&
-        (0, semver_1.lt)(angularVersion, '17.1.0')) {
-        if (options.optimization.styles.removeSpecialComments === false) {
-            throw new Error(`The "optimization.styles.removeSpecialComments" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
+    if ((0, semver_1.lt)(angularVersion, '17.1.0')) {
+        if (options.loader) {
+            throw new Error(`The "loader" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
+        }
+        if (options.indexHtmlTransformer) {
+            throw new Error(`The "indexHtmlTransformer" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
         }
-        else if (options.optimization.styles.removeSpecialComments === true) {
-            // silently remove the option, as it was the default before 17.1.0
-            delete options.optimization.styles.removeSpecialComments;
+        if (typeof options.index === 'object' &&
+            options.index.preloadInitial !== undefined) {
+            throw new Error(`The "index.preloadInitial" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
+        }
+        if (options.optimization &&
+            typeof options.optimization !== 'boolean' &&
+            options.optimization.styles &&
+            typeof options.optimization.styles !== 'boolean') {
+            if (options.optimization.styles.removeSpecialComments === false) {
+                throw new Error(`The "optimization.styles.removeSpecialComments" option requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
+            }
+            else if (options.optimization.styles.removeSpecialComments === true) {
+                // silently remove the option, as it was the default before 17.1.0
+                delete options.optimization.styles.removeSpecialComments;
+            }
+        }
+        if (typeof options.outputPath === 'object') {
+            throw new Error(`The "outputPath" option as an object requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
         }
     }
-    if (typeof options.outputPath === 'object' && (0, semver_1.lt)(angularVersion, '17.1.0')) {
-        throw new Error(`The "outputPath" option as an object requires Angular version 17.1.0 or greater. You are currently using version ${angularVersion}.`);
+    if ((0, semver_1.lt)(angularVersion, '17.2.0')) {
+        if (options.define) {
+            throw new Error(`The "define" option requires Angular version 17.2.0 or greater. You are currently using version ${angularVersion}.`);
+        }
+        if (options.clearScreen !== undefined) {
+            throw new Error(`The "clearScreen" option requires Angular version 17.2.0 or greater. You are currently using version ${angularVersion}.`);
+        }
     }
 }
 exports.validateOptions = validateOptions;

package/src/executors/extract-i18n/extract-i18n.impl.d.ts

@@ -0,0 +1,3 @@
+import { type ExecutorContext } from '@nx/devkit';
+import type { ExtractI18nExecutorOptions } from './schema';
+export default function extractI18nExecutor(options: ExtractI18nExecutorOptions, context: ExecutorContext): AsyncGenerator<never, import("@angular-devkit/architect").BuilderOutput, unknown>;

package/src/executors/extract-i18n/extract-i18n.impl.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const ngcli_adapter_1 = require("nx/src/adapter/ngcli-adapter");
+const project_graph_1 = require("nx/src/project-graph/project-graph");
+const angular_version_utils_1 = require("../utilities/angular-version-utils");
+const patch_builder_context_1 = require("../utilities/patch-builder-context");
+async function* extractI18nExecutor(options, context) {
+    const parsedBuildTarget = (0, devkit_1.parseTargetString)(options.buildTarget, context);
+    const browserTargetProjectConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(parsedBuildTarget.project);
+    const buildTarget = browserTargetProjectConfiguration.targets[parsedBuildTarget.target];
+    const isUsingEsbuildBuilder = [
+        '@angular-devkit/build-angular:application',
+        '@angular-devkit/build-angular:browser-esbuild',
+        '@nx/angular:application',
+        '@nx/angular:browser-esbuild',
+    ].includes(buildTarget.executor);
+    const builderContext = await (0, ngcli_adapter_1.createBuilderContext)({
+        builderName: 'extrct-i18n',
+        description: 'Extracts i18n messages from source code.',
+        optionSchema: await Promise.resolve().then(() => require('./schema.json')),
+    }, context);
+    /**
+     * The Angular CLI extract-i18n builder make some decisions based on the build
+     * target builder but it only considers `@angular-devkit/build-angular:*`
+     * builders. Since we are using a custom builder, we patch the context to
+     * handle `@nx/angular:*` executors.
+     */
+    (0, patch_builder_context_1.patchBuilderContext)(builderContext, isUsingEsbuildBuilder, parsedBuildTarget);
+    const { executeExtractI18nBuilder } = await Promise.resolve().then(() => require('@angular-devkit/build-angular'));
+    const delegateBuilderOptions = getDelegateBuilderOptions(options);
+    return await executeExtractI18nBuilder(delegateBuilderOptions, builderContext);
+}
+exports.default = extractI18nExecutor;
+function getDelegateBuilderOptions(options) {
+    const delegateBuilderOptions = { ...options };
+    const { major: angularMajorVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
+    if (angularMajorVersion <= 17) {
+        delegateBuilderOptions.browserTarget = delegateBuilderOptions.buildTarget;
+        delete delegateBuilderOptions.buildTarget;
+    }
+    return delegateBuilderOptions;
+}

package/src/executors/extract-i18n/schema.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractI18nBuilderOptions } from '@angular-devkit/build-angular';
+
+export type ExtractI18nExecutorOptions = Omit<
+  ExtractI18nBuilderOptions,
+  'browserTarget'
+> & {
+  buildTarget: string;
+};

package/src/executors/extract-i18n/schema.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Schema for Nx extract-i18n Executor",
+  "description": "Extracts i18n messages from source code.",
+  "outputCapture": "direct-nodejs",
+  "type": "object",
+  "properties": {
+    "buildTarget": {
+      "type": "string",
+      "description": "A builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
+      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+    },
+    "format": {
+      "type": "string",
+      "description": "Output format for the generated file.",
+      "default": "xlf",
+      "enum": [
+        "xmb",
+        "xlf",
+        "xlif",
+        "xliff",
+        "xlf2",
+        "xliff2",
+        "json",
+        "arb",
+        "legacy-migrate"
+      ]
+    },
+    "progress": {
+      "type": "boolean",
+      "description": "Log progress to the console.",
+      "default": true
+    },
+    "outputPath": {
+      "type": "string",
+      "description": "Path where output will be placed."
+    },
+    "outFile": {
+      "type": "string",
+      "description": "Name of the file to output."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["buildTarget"]
+}

package/src/executors/package/ng-packagr-adjustments/ng-packagr.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNgPackagrInstance = void 0;
 const ng_packagr_1 = require("ng-packagr");
 const angular_version_utils_1 = require("../../utilities/angular-version-utils");
-const stylesheet_processor_di_1 = require("../../utilities/ng-packagr/stylesheet-processor.di");
 async function getNgPackagrInstance(options) {
     const { major: angularMajorVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
     if (angularMajorVersion >= 17) {
+        const { STYLESHEET_PROCESSOR } = await Promise.resolve().then(() => require('../../utilities/ng-packagr/stylesheet-processor.di'));
         const packagr = (0, ng_packagr_1.ngPackagr)();
-        packagr.withProviders([stylesheet_processor_di_1.STYLESHEET_PROCESSOR]);
+        packagr.withProviders([STYLESHEET_PROCESSOR]);
         return packagr;
     }
     const { NX_ENTRY_POINT_PROVIDERS } = await Promise.resolve().then(() => require('./ng-package/entry-point/entry-point.di'));

package/src/executors/utilities/ng-packagr/stylesheet-processor.js

@@ -16,6 +16,8 @@ const color_1 = require("ng-packagr/lib/utils/color");
 // using this instead of the one from ng-packagr
 const tailwindcss_1 = require("./tailwindcss");
 const devkit_1 = require("@nx/devkit");
+const semver_1 = require("semver");
+const angular_version_utils_1 = require("../angular-version-utils");
 const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
 const maxThreads = typeof maxWorkersVariable === 'string' && maxWorkersVariable !== ''
     ? +maxWorkersVariable
@@ -46,14 +48,14 @@ class StylesheetProcessor {
         ];
     }
     async process({ filePath, content, }) {
-        this.createRenderWorker();
+        await this.createRenderWorker();
         return this.renderWorker.run({ content, filePath });
     }
     /** Destory workers in pool. */
     destroy() {
         void this.renderWorker?.destroy();
     }
-    createRenderWorker() {
+    async createRenderWorker() {
         if (this.renderWorker) {
             return;
         }
@@ -69,6 +71,12 @@ class StylesheetProcessor {
             currentDir = (0, path_1.dirname)(prevDir);
         }
         const browserslistData = browserslist(undefined, { path: this.basePath });
+        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        let postcssConfiguration;
+        if ((0, semver_1.gte)(ngPackagrVersion, '17.2.0')) {
+            const { loadPostcssConfiguration } = await Promise.resolve().then(() => require('ng-packagr/lib/styles/postcss-configuration'));
+            postcssConfiguration = await loadPostcssConfiguration(this.projectBasePath);
+        }
         this.renderWorker = new Piscina({
             filename: require.resolve('ng-packagr/lib/styles/stylesheet-processor-worker'),
             maxThreads,
@@ -77,6 +85,7 @@ class StylesheetProcessor {
                 FORCE_COLOR: '' + color_1.colors.enabled,
             },
             workerData: {
+                postcssConfiguration,
                 tailwindConfigPath: (0, tailwindcss_1.getTailwindConfigPath)(this.projectBasePath, devkit_1.workspaceRoot),
                 projectBasePath: this.projectBasePath,
                 browserslistData,

package/src/executors/utilities/patch-builder-context.d.ts

@@ -0,0 +1,3 @@
+import type { BuilderContext } from '@angular-devkit/architect';
+import type { Target } from '@nx/devkit';
+export declare function patchBuilderContext(context: BuilderContext, isUsingEsbuildBuilder: boolean, buildTarget: Target): void;

package/src/executors/utilities/patch-builder-context.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchBuilderContext = void 0;
+const executorToBuilderMap = new Map([
+    [
+        '@nx/angular:browser-esbuild',
+        '@angular-devkit/build-angular:browser-esbuild',
+    ],
+    ['@nx/angular:application', '@angular-devkit/build-angular:application'],
+]);
+function patchBuilderContext(context, isUsingEsbuildBuilder, buildTarget) {
+    const originalGetBuilderNameForTarget = context.getBuilderNameForTarget;
+    context.getBuilderNameForTarget = async (target) => {
+        const builderName = await originalGetBuilderNameForTarget(target);
+        if (executorToBuilderMap.has(builderName)) {
+            return executorToBuilderMap.get(builderName);
+        }
+        return builderName;
+    };
+    if (isUsingEsbuildBuilder) {
+        const originalGetTargetOptions = context.getTargetOptions;
+        context.getTargetOptions = async (target) => {
+            const options = await originalGetTargetOptions(target);
+            if (target.project === buildTarget.project &&
+                target.target === buildTarget.target &&
+                target.configuration === buildTarget.configuration) {
+                cleanBuildTargetOptions(options);
+            }
+            return options;
+        };
+    }
+}
+exports.patchBuilderContext = patchBuilderContext;
+function cleanBuildTargetOptions(options) {
+    delete options.buildLibsFromSource;
+    delete options.customWebpackConfig;
+    delete options.indexHtmlTransformer;
+    delete options.indexFileTransformer;
+    delete options.plugins;
+    return options;
+}

package/src/generators/add-linting/add-linting.js

@@ -20,7 +20,8 @@ async function addLintingGenerator(tree, options) {
         setParserOptionsProject: options.setParserOptionsProject,
         skipFormat: true,
         rootProject: rootProject,
-        addPlugin: options.addPlugin,
+        addPlugin: false,
+        addExplicitTargets: true,
     });
     tasks.push(lintTask);
     if ((0, eslint_file_1.isEslintConfigSupported)(tree)) {

package/src/generators/add-linting/schema.d.ts

@@ -6,5 +6,4 @@ export interface AddLintingGeneratorSchema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   unitTestRunner?: string;
-  addPlugin?: boolean;
 }

package/src/generators/application/application.js

@@ -12,7 +12,6 @@ const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-projec
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         projectNameAndRootFormat: 'derived',
-        addPlugin: false,
         ...schema,
     });
 }

package/src/generators/application/files/ng-module/src/app/nx-welcome.component.ts__tpl__

@@ -699,7 +699,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect-to-nx-cloud</pre>
+              <pre>nx connect</pre>
               <a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
             </div>
             <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">

package/src/generators/application/files/standalone-components/src/app/nx-welcome.component.ts__tpl__

@@ -702,7 +702,7 @@ import { CommonModule } from '@angular/common';
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect-to-nx-cloud</pre>
+              <pre>nx connect</pre>
               <a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
             </div>
             <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">

package/src/generators/application/lib/add-e2e.js

@@ -6,6 +6,8 @@ const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 const version_utils_1 = require("../../utils/version-utils");
 async function addE2e(tree, options) {
+    // since e2e are separate projects, default to adding plugins
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false';
     if (options.e2eTestRunner === 'cypress') {
         // TODO: This can call `@nx/web:static-config` generator when ready
         addFileServerTarget(tree, options, 'serve-static');
@@ -26,7 +28,7 @@ async function addE2e(tree, options) {
             devServerTarget: `${options.name}:serve:development`,
             baseUrl: 'http://localhost:4200',
             rootProject: options.rootProject,
-            addPlugin: options.addPlugin,
+            addPlugin,
         });
     }
     else if (options.e2eTestRunner === 'playwright') {
@@ -49,7 +51,7 @@ async function addE2e(tree, options) {
             webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
             webServerAddress: `http://localhost:${options.port ?? 4200}`,
             rootProject: options.rootProject,
-            addPlugin: options.addPlugin,
+            addPlugin,
         });
     }
 }

package/src/generators/application/lib/add-linting.js

@@ -15,7 +15,6 @@ async function addLinting(host, options) {
         skipPackageJson: options.skipPackageJson,
         unitTestRunner: options.unitTestRunner,
         skipFormat: true,
-        addPlugin: options.addPlugin,
     });
 }
 exports.addLinting = addLinting;

package/src/generators/application/lib/add-unit-test-runner.js

@@ -10,7 +10,6 @@ async function addUnitTestRunner(host, options) {
             projectRoot: options.appProjectRoot,
             skipPackageJson: options.skipPackageJson,
             strict: options.strict,
-            addPlugin: options.addPlugin,
         });
     }
 }

package/src/generators/application/lib/normalize-options.js

@@ -19,7 +19,6 @@ async function normalizeOptions(host, options) {
     });
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const parsedTags = options.tags

package/src/generators/application/schema.d.ts

@@ -31,5 +31,4 @@ export interface Schema {
   minimal?: boolean;
   bundler?: 'webpack' | 'esbuild';
   ssr?: boolean;
-  addPlugin?: boolean;
 }

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -12,7 +12,6 @@ const entry_point_1 = require("../utils/storybook-ast/entry-point");
 const module_info_1 = require("../utils/storybook-ast/module-info");
 function cypressComponentConfiguration(tree, options) {
     return cypressComponentConfigurationInternal(tree, {
-        addPlugin: false,
         ...options,
     });
 }
@@ -22,12 +21,12 @@ exports.cypressComponentConfiguration = cypressComponentConfiguration;
  * storybook + cypress then use the componentCypressGenerator instead.
  */
 async function cypressComponentConfigurationInternal(tree, options) {
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await (0, cypress_1.componentConfigurationGenerator)(tree, {
         project: options.project,
         skipFormat: true,
-        addPlugin: options.addPlugin,
+        addPlugin: false,
+        addExplicitTargets: true,
     });
     await configureCypressCT(tree, options);
     await addFiles(tree, projectConfig, options);

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -3,5 +3,4 @@ export interface CypressComponentConfigSchema {
   generateTests: boolean;
   skipFormat?: boolean;
   buildTarget?: string;
-  addPlugin?: boolean;
 }

package/src/generators/library/schema.d.ts

@@ -40,4 +40,5 @@ export interface Schema {
   skipTests?: boolean;
   selector?: string;
   skipSelector?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/ng-add/utilities/workspace.js

@@ -151,7 +151,7 @@ function updatePackageJson(tree) {
 exports.updatePackageJson = updatePackageJson;
 async function updateRootEsLintConfig(tree, existingEsLintConfig, unitTestRunner) {
     await (0, eslint_1.lintInitGenerator)(tree, {
-        addPlugin: process.env.NX_ADD_PLUGINS !== 'false',
+        addPlugin: false,
     });
     if (!existingEsLintConfig) {
         // There was no eslint config in the root, so we set it up and use it as-is

package/src/generators/storybook-configuration/lib/generate-storybook-configuration.js

@@ -15,6 +15,8 @@ async function generateStorybookConfiguration(tree, options) {
         interactionTests: options.interactionTests,
         configureStaticServe: options.configureStaticServe,
         skipFormat: true,
+        addPlugin: false,
+        addExplicitTargets: true,
     });
 }
 exports.generateStorybookConfiguration = generateStorybookConfiguration;

package/src/generators/utils/add-jest.d.ts

@@ -4,6 +4,5 @@ export type AddJestOptions = {
     projectRoot: string;
     skipPackageJson: boolean;
     strict: boolean;
-    addPlugin?: boolean;
 };
 export declare function addJest(tree: Tree, options: AddJestOptions): Promise<void>;

package/src/generators/utils/add-jest.js

@@ -17,7 +17,8 @@ async function addJest(tree, options) {
         skipSerializers: false,
         skipPackageJson: options.skipPackageJson,
         skipFormat: true,
-        addPlugin: options.addPlugin,
+        addPlugin: false,
+        addExplicitTargets: true,
     });
     const setupFile = (0, devkit_1.joinPathFragments)(options.projectRoot, 'src', 'test-setup.ts');
     if (options.strict && tree.exists(setupFile)) {

package/src/migrations/update-18-1-0/update-angular-cli.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+export declare const angularCliVersion = "~17.2.0";
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-1-0/update-angular-cli.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.angularCliVersion = void 0;
+const devkit_1 = require("@nx/devkit");
+exports.angularCliVersion = '~17.2.0';
+async function default_1(tree) {
+    let shouldFormat = false;
+    (0, devkit_1.updateJson)(tree, 'package.json', (json) => {
+        if (json.devDependencies?.['@angular/cli']) {
+            json.devDependencies['@angular/cli'] = exports.angularCliVersion;
+            shouldFormat = true;
+        }
+        else if (json.dependencies?.['@angular/cli']) {
+            json.dependencies['@angular/cli'] = exports.angularCliVersion;
+            shouldFormat = true;
+        }
+        return json;
+    });
+    if (shouldFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+exports.default = default_1;

package/src/utils/versions.d.ts

@@ -1,7 +1,7 @@
 export declare const nxVersion: any;
-export declare const angularVersion = "~17.1.0";
-export declare const angularDevkitVersion = "~17.1.0";
-export declare const ngPackagrVersion = "~17.1.0";
+export declare const angularVersion = "~17.2.0";
+export declare const angularDevkitVersion = "~17.2.0";
+export declare const ngPackagrVersion = "~17.2.0";
 export declare const ngrxVersion = "~17.0.0";
 export declare const rxjsVersion = "~7.8.0";
 export declare const zoneJsVersion = "~0.14.3";
@@ -19,7 +19,7 @@ export declare const postcssVersion = "^8.4.5";
 export declare const postcssUrlVersion = "~10.1.3";
 export declare const autoprefixerVersion = "^10.4.0";
 export declare const tsNodeVersion = "10.9.1";
-export declare const jestPresetAngularVersion = "~13.1.4";
+export declare const jestPresetAngularVersion = "~14.0.2";
 export declare const typesNodeVersion = "18.16.9";
 export declare const jasmineMarblesVersion = "^0.9.2";
 export declare const jsoncEslintParserVersion = "^2.1.0";

package/src/utils/versions.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsoncEslintParserVersion = exports.jasmineMarblesVersion = exports.typesNodeVersion = exports.jestPresetAngularVersion = exports.tsNodeVersion = exports.autoprefixerVersion = exports.postcssUrlVersion = exports.postcssVersion = exports.tailwindVersion = exports.angularEslintVersion = exports.moduleFederationNodeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.typesCorsVersion = exports.corsVersion = exports.tsLibVersion = exports.angularJsVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
-exports.angularVersion = '~17.1.0';
-exports.angularDevkitVersion = '~17.1.0';
-exports.ngPackagrVersion = '~17.1.0';
+exports.angularVersion = '~17.2.0';
+exports.angularDevkitVersion = '~17.2.0';
+exports.ngPackagrVersion = '~17.2.0';
 exports.ngrxVersion = '~17.0.0';
 exports.rxjsVersion = '~7.8.0';
 exports.zoneJsVersion = '~0.14.3';
@@ -22,7 +22,7 @@ exports.postcssVersion = '^8.4.5';
 exports.postcssUrlVersion = '~10.1.3';
 exports.autoprefixerVersion = '^10.4.0';
 exports.tsNodeVersion = '10.9.1';
-exports.jestPresetAngularVersion = '~13.1.4';
+exports.jestPresetAngularVersion = '~14.0.2';
 exports.typesNodeVersion = '18.16.9';
 exports.jasmineMarblesVersion = '^0.9.2';
 exports.jsoncEslintParserVersion = '^2.1.0';