@nx/angular 17.2.0-beta.9 → 17.2.0-canary.20231207-b8d24e6

package/executors.d.ts

@@ -1,11 +1,12 @@
-export * from './src/builders/module-federation-dev-server/module-federation-dev-server.impl';
 export * from './src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl';
 export * from './src/builders/webpack-browser/webpack-browser.impl';
 export * from './src/builders/webpack-server/webpack-server.impl';
+export * from './src/executors/module-federation-dev-server/module-federation-dev-server.impl';
 export * from './src/executors/delegate-build/delegate-build.impl';
 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';
 import { executeDevServerBuilder } from './src/builders/dev-server/dev-server.impl';
 export { 
 /**

package/executors.js

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.executeDevServerBuilder = exports.executeWebpackDevServerBuilder = void 0;
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./src/builders/module-federation-dev-server/module-federation-dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/webpack-browser/webpack-browser.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/webpack-server/webpack-server.impl"), exports);
+tslib_1.__exportStar(require("./src/executors/module-federation-dev-server/module-federation-dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/delegate-build/delegate-build.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/ng-packagr-lite/ng-packagr-lite.impl"), exports);
 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);
 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

@@ -19,6 +19,16 @@
       "implementation": "./src/executors/browser-esbuild/browser-esbuild.impl",
       "schema": "./src/executors/browser-esbuild/schema.json",
       "description": "Builds your application with esbuild and adds support for incremental builds."
+    },
+    "module-federation-dev-server": {
+      "implementation": "./src/executors/module-federation-dev-server/module-federation-dev-server.impl",
+      "schema": "./src/executors/module-federation-dev-server/schema.json",
+      "description": "The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host."
+    },
+    "application": {
+      "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_."
     }
   },
   "builders": {
@@ -37,11 +47,6 @@
       "schema": "./src/builders/webpack-server/schema.json",
       "description": "The `webpack-server` executor is very similar to the standard `server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR."
     },
-    "module-federation-dev-server": {
-      "implementation": "./src/builders/module-federation-dev-server/module-federation-dev-server.impl",
-      "schema": "./src/builders/module-federation-dev-server/schema.json",
-      "description": "The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host."
-    },
     "module-federation-dev-ssr": {
       "implementation": "./src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl",
       "schema": "./src/builders/module-federation-dev-ssr/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.2.0-beta.9",
+  "version": "17.2.0-canary.20231207-b8d24e6",
   "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,15 +78,15 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "17.2.0-beta.9",
-    "@nx/cypress": "17.2.0-beta.9",
-    "@nx/jest": "17.2.0-beta.9",
-    "@nx/js": "17.2.0-beta.9",
-    "@nx/eslint": "17.2.0-beta.9",
-    "@nx/webpack": "17.2.0-beta.9",
-    "@nx/web": "17.2.0-beta.9",
-    "@nx/workspace": "17.2.0-beta.9",
-    "@nrwl/angular": "17.2.0-beta.9"
+    "@nx/devkit": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/cypress": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/jest": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/js": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/eslint": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/webpack": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/web": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/workspace": "17.2.0-canary.20231207-b8d24e6",
+    "@nrwl/angular": "17.2.0-canary.20231207-b8d24e6"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

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

@@ -7,10 +7,11 @@ const webpack_nx_build_coordination_plugin_1 = require("@nx/webpack/src/plugins/
 const fs_1 = require("fs");
 const operators_1 = require("nx/src/project-graph/operators");
 const project_graph_1 = require("nx/src/project-graph/project-graph");
+const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_2 = require("rxjs/operators");
-const semver_1 = require("semver");
 const angular_version_utils_1 = require("../../executors/utilities/angular-version-utils");
+const esbuild_extensions_1 = require("../../executors/utilities/esbuild-extensions");
 const buildable_libs_1 = require("../utilities/buildable-libs");
 const webpack_1 = require("../utilities/webpack");
 const lib_1 = require("./lib");
@@ -57,6 +58,7 @@ function executeDevServerBuilder(rawOptions, context) {
             target: parsedBuildTarget.target,
         });
         dependencies = foundDependencies;
+        const relativeTsConfigPath = (0, devkit_1.normalizePath)((0, path_1.relative)(context.workspaceRoot, tsConfigPath));
         // We can't just pass the tsconfig path in memory to the angular builder
         // function because we can't pass the build target options to it, the build
         // targets options will be retrieved by the builder from the project
@@ -66,22 +68,33 @@ function executeDevServerBuilder(rawOptions, context) {
         const originalGetTargetOptions = context.getTargetOptions;
         context.getTargetOptions = async (target) => {
             const options = await originalGetTargetOptions(target);
-            options.tsConfig = tsConfigPath;
+            options.tsConfig = relativeTsConfigPath;
             return options;
         };
         // The buildTargetConfiguration also needs to use the generated tsconfig path
         // otherwise the build will fail if customWebpack function/file is referencing
         // local libs. This synchronize the behavior with webpack-browser and
         // webpack-server implementation.
-        buildTargetOptions.tsConfig = tsConfigPath;
+        buildTargetOptions.tsConfig = relativeTsConfigPath;
     }
-    const delegateBuilderOptions = getDelegateBuilderOptions(options, buildTarget, context);
+    const delegateBuilderOptions = getDelegateBuilderOptions(options);
     const isUsingWebpackBuilder = ![
         '@angular-devkit/build-angular:application',
         '@angular-devkit/build-angular:browser-esbuild',
+        '@nx/angular:application',
         '@nx/angular:browser-esbuild',
     ].includes(buildTarget.executor);
-    return (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))).pipe((0, operators_2.switchMap)(({ executeDevServerBuilder }) => executeDevServerBuilder(delegateBuilderOptions, context, {
+    /**
+     * The Angular CLI dev-server 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.
+     */
+    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)),
+    ]).pipe((0, operators_2.switchMap)(([{ executeDevServerBuilder }, plugins]) => executeDevServerBuilder(delegateBuilderOptions, context, {
         webpackConfiguration: isUsingWebpackBuilder
             ? async (baseWebpackConfig) => {
                 if (!buildLibsFromSource) {
@@ -109,30 +122,58 @@ function executeDevServerBuilder(rawOptions, context) {
                 indexHtml: (0, webpack_1.resolveIndexHtmlTransformer)(pathToIndexFileTransformer, buildTargetOptions.tsConfig, context.target),
             }
             : {}),
+    }, {
+        buildPlugins: plugins,
     })));
 }
 exports.executeDevServerBuilder = executeDevServerBuilder;
 exports.default = require('@angular-devkit/architect').createBuilder(executeDevServerBuilder);
-function getDelegateBuilderOptions(options, buildTarget, context) {
-    const delegatedBuilderOptions = { ...options };
-    const { major: angularMajorVersion, version: angularVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
-    // this option was introduced in angular 16.1.0
-    // https://github.com/angular/angular-cli/commit/3ede1a2cac5005f4dfbd2a62ef528a34c3793b78
-    if ((0, semver_1.gte)(angularVersion, '16.1.0') &&
-        buildTarget.executor === '@nx/angular:browser-esbuild') {
-        delegatedBuilderOptions.forceEsbuild = true;
-        const originalLoggerWarn = context.logger.warn.bind(context.logger);
-        context.logger.warn = (...args) => {
-            // we silence the warning about forcing esbuild from third-party builders
-            if (args[0].includes('Warning: Forcing the use of the esbuild-based build system with third-party builders may cause unexpected behavior and/or build failures.')) {
-                return;
+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;
+    }
+    // delete extra option not supported by the delegate builder
+    delete delegateBuilderOptions.buildLibsFromSource;
+    return delegateBuilderOptions;
+}
+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);
             }
-            originalLoggerWarn(...args);
+            return options;
         };
     }
-    if (angularMajorVersion <= 17) {
-        delegatedBuilderOptions.browserTarget = delegatedBuilderOptions.buildTarget;
-        delete delegatedBuilderOptions.buildTarget;
-    }
-    return delegatedBuilderOptions;
+}
+function cleanBuildTargetOptions(options) {
+    delete options.buildLibsFromSource;
+    delete options.customWebpackConfig;
+    delete options.indexFileTransformer;
+    delete options.plugins;
+    return options;
 }

package/src/builders/utilities/module-federation.js

@@ -85,7 +85,7 @@ function getStaticRemotes(project, context, workspaceProjects, remotesToSkip) {
 }
 exports.getStaticRemotes = getStaticRemotes;
 function validateDevRemotes(options, workspaceProjects) {
-    const invalidDevRemotes = options.devRemotes?.filter((remote) => !workspaceProjects[remote]);
+    const invalidDevRemotes = options.devRemotes?.filter((remote) => !workspaceProjects[remote]) ?? [];
     if (invalidDevRemotes.length) {
         throw new Error(invalidDevRemotes.length === 1
             ? `Invalid dev remote provided: ${invalidDevRemotes[0]}.`

package/src/builders/webpack-browser/webpack-browser.impl.js

@@ -7,6 +7,7 @@ const fs_1 = require("fs");
 const configuration_1 = require("nx/src/config/configuration");
 const operators_1 = require("nx/src/project-graph/operators");
 const utils_1 = require("nx/src/tasks-runner/utils");
+const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_2 = require("rxjs/operators");
 const buildable_libs_1 = require("../utilities/buildable-libs");
@@ -40,7 +41,7 @@ function executeWebpackBrowserBuilder(options, context) {
         projectGraph = (0, devkit_1.readCachedProjectGraph)();
         const { tsConfigPath, dependencies: foundDependencies } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(delegateBuilderOptions.tsConfig, context, { projectGraph });
         dependencies = foundDependencies;
-        delegateBuilderOptions.tsConfig = tsConfigPath;
+        delegateBuilderOptions.tsConfig = (0, devkit_1.normalizePath)((0, path_1.relative)(context.workspaceRoot, tsConfigPath));
     }
     return (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))).pipe((0, operators_2.switchMap)(({ executeBrowserBuilder }) => executeBrowserBuilder(delegateBuilderOptions, context, {
         webpackConfiguration: (baseWebpackConfig) => {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.executeWebpackServerBuilder = void 0;
 const devkit_1 = require("@nx/devkit");
 const fs_1 = require("fs");
+const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const buildable_libs_1 = require("../utilities/buildable-libs");
@@ -50,7 +51,7 @@ function executeWebpackServerBuilder(options, context) {
     options.buildLibsFromSource ??= true;
     if (!options.buildLibsFromSource) {
         const { tsConfigPath } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(options.tsConfig, context);
-        options.tsConfig = tsConfigPath;
+        options.tsConfig = (0, devkit_1.normalizePath)((0, path_1.relative)(context.workspaceRoot, tsConfigPath));
     }
     return buildServerApp(options, context);
 }

package/src/executors/application/application.impl.d.ts

@@ -0,0 +1,9 @@
+import type { ExecutorContext } from '@nx/devkit';
+import type { ApplicationExecutorOptions } from './schema';
+export default function applicationExecutor(options: ApplicationExecutorOptions, context: ExecutorContext): AsyncGenerator<import("@angular-devkit/core").JsonObject & import("@angular-devkit/architect/src/output-schema").Schema & {
+    outputFiles?: import("@angular-devkit/build-angular/src/tools/esbuild/bundler-context").BuildOutputFile[];
+    assetFiles?: {
+        source: string;
+        destination: string;
+    }[];
+}, any, undefined>;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ngcli_adapter_1 = require("nx/src/adapter/ngcli-adapter");
+const angular_version_utils_1 = require("../utilities/angular-version-utils");
+const buildable_libs_1 = require("../utilities/buildable-libs");
+const esbuild_extensions_1 = require("../utilities/esbuild-extensions");
+async function* applicationExecutor(options, context) {
+    const { major: angularMajorVersion, version: angularVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
+    if (angularMajorVersion < 17) {
+        throw new Error(`The "application" executor requires Angular version 17 or greater. You are currently using version ${angularVersion}.`);
+    }
+    const { buildLibsFromSource = true, plugins: pluginPaths, ...delegateExecutorOptions } = options;
+    let dependencies;
+    if (!buildLibsFromSource) {
+        const { tsConfigPath, dependencies: foundDependencies } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(delegateExecutorOptions.tsConfig, context);
+        dependencies = foundDependencies;
+        delegateExecutorOptions.tsConfig = tsConfigPath;
+    }
+    const plugins = await (0, esbuild_extensions_1.loadPlugins)(pluginPaths, options.tsConfig);
+    const { buildApplication } = await Promise.resolve().then(() => require('@angular-devkit/build-angular'));
+    const builderContext = await (0, ngcli_adapter_1.createBuilderContext)({
+        builderName: 'application',
+        description: 'Build an application.',
+        optionSchema: await Promise.resolve().then(() => require('./schema.json')),
+    }, context);
+    return yield* buildApplication(delegateExecutorOptions, builderContext, plugins);
+}
+exports.default = applicationExecutor;

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

@@ -0,0 +1,7 @@
+import type { ApplicationBuilderOptions } from '@angular-devkit/build-angular';
+import type { PluginSpec } from '../utilities/esbuild-extensions';
+
+export interface ApplicationExecutorOptions extends ApplicationBuilderOptions {
+  buildLibsFromSource?: boolean;
+  plugins?: string[] | PluginSpec[];
+}