@nx/angular 17.3.1 → 17.3.2

package/migrations.json

@@ -356,6 +356,12 @@
       },
       "description": "Add 'autoprefixer' as dev dependency when '@nx/angular:ng-packagr-lite' or '@nx/angular:package` is used.",
       "factory": "./src/migrations/update-17-3-0/add-autoprefixer-dependency"
+    },
+    "add-module-federation-env-var-to-target-defaults": {
+      "cli": "nx",
+      "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"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.3.1",
+  "version": "17.3.2",
   "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": {
@@ -74,20 +74,20 @@
     "ignore": "^5.0.4",
     "magic-string": "~0.30.2",
     "minimatch": "9.0.3",
-    "semver": "7.5.3",
+    "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "17.3.1",
-    "@nx/cypress": "17.3.1",
-    "@nx/jest": "17.3.1",
-    "@nx/js": "17.3.1",
-    "@nx/eslint": "17.3.1",
-    "@nx/webpack": "17.3.1",
-    "@nx/web": "17.3.1",
-    "@nx/workspace": "17.3.1",
+    "@nx/devkit": "17.3.2",
+    "@nx/cypress": "17.3.2",
+    "@nx/jest": "17.3.2",
+    "@nx/js": "17.3.2",
+    "@nx/eslint": "17.3.2",
+    "@nx/webpack": "17.3.2",
+    "@nx/web": "17.3.2",
+    "@nx/workspace": "17.3.2",
     "piscina": "^4.2.1",
-    "@nrwl/angular": "17.3.1"
+    "@nrwl/angular": "17.3.2"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/plugins/component-testing.d.ts

@@ -29,8 +29,9 @@ export declare function nxComponentTestingPreset(pathToConfig: string, options?:
                     customWebpackConfig?: {
                         path: string;
                     };
-                    indexFileTransformer?: string;
+                    indexHtmlTransformer?: string;
                     buildLibsFromSource?: boolean;
+                    indexFileTransformer?: string;
                 } & {
                     workspaceRoot: string;
                 };

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

@@ -54,9 +54,11 @@ function executeDevServerBuilder(rawOptions, context) {
             throw new Error(`Custom Webpack Config File Not Found!\nTo use a custom webpack config, please ensure the path to the custom webpack file is correct: \n${pathToWebpackConfig}`);
         }
     }
+    const normalizedIndexHtmlTransformer = buildTargetOptions.indexHtmlTransformer ??
+        buildTargetOptions.indexFileTransformer;
     let pathToIndexFileTransformer;
-    if (buildTargetOptions.indexFileTransformer) {
-        pathToIndexFileTransformer = (0, devkit_1.joinPathFragments)(context.workspaceRoot, buildTargetOptions.indexFileTransformer);
+    if (normalizedIndexHtmlTransformer) {
+        pathToIndexFileTransformer = (0, devkit_1.joinPathFragments)(context.workspaceRoot, normalizedIndexHtmlTransformer);
         if (pathToIndexFileTransformer && !(0, fs_1.existsSync)(pathToIndexFileTransformer)) {
             throw new Error(`File containing Index File Transformer function Not Found!\n Please ensure the path to the file containing the function is correct: \n${pathToIndexFileTransformer}`);
         }
@@ -184,6 +186,7 @@ function patchBuilderContext(context, isUsingEsbuildBuilder, buildTarget) {
 function cleanBuildTargetOptions(options) {
     delete options.buildLibsFromSource;
     delete options.customWebpackConfig;
+    delete options.indexHtmlTransformer;
     delete options.indexFileTransformer;
     delete options.plugins;
     return options;

package/src/builders/webpack-browser/schema.d.ts

@@ -4,6 +4,10 @@ export type BrowserBuilderSchema = Schema & {
   customWebpackConfig?: {
     path: string;
   };
-  indexFileTransformer?: string;
+  indexHtmlTransformer?: string;
   buildLibsFromSource?: boolean;
+  /**
+   * @deprecated Use `indexHtmlTransformer` instead. It will be removed in Nx 19.
+   */
+  indexFileTransformer?: string;
 };

package/src/builders/webpack-browser/schema.json

@@ -458,9 +458,10 @@
       "x-priority": "important",
       "additionalProperties": false
     },
-    "indexFileTransformer": {
+    "indexHtmlTransformer": {
       "description": "Path to transformer function to transform the index.html",
-      "type": "string"
+      "type": "string",
+      "alias": "indexFileTransformer"
     },
     "buildLibsFromSource": {
       "type": "boolean",

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

@@ -24,7 +24,7 @@ function shouldSkipInitialTargetRun(projectGraph, project, target) {
 }
 function executeWebpackBrowserBuilder(options, context) {
     options.buildLibsFromSource ??= true;
-    const { buildLibsFromSource, customWebpackConfig, indexFileTransformer, ...delegateBuilderOptions } = options;
+    const { buildLibsFromSource, customWebpackConfig, indexHtmlTransformer, indexFileTransformer, ...delegateBuilderOptions } = options;
     process.env.NX_BUILD_LIBS_FROM_SOURCE = `${buildLibsFromSource}`;
     process.env.NX_BUILD_TARGET = (0, devkit_1.targetToTargetString)({ ...context.target });
     const pathToWebpackConfig = customWebpackConfig?.path &&
@@ -32,8 +32,9 @@ function executeWebpackBrowserBuilder(options, context) {
     if (pathToWebpackConfig && !(0, fs_1.existsSync)(pathToWebpackConfig)) {
         throw new Error(`Custom Webpack Config File Not Found!\nTo use a custom webpack config, please ensure the path to the custom webpack file is correct: \n${pathToWebpackConfig}`);
     }
-    const pathToIndexFileTransformer = indexFileTransformer &&
-        (0, devkit_1.joinPathFragments)(context.workspaceRoot, indexFileTransformer);
+    const normalizedIndexHtmlTransformer = indexHtmlTransformer ?? indexFileTransformer;
+    const pathToIndexFileTransformer = normalizedIndexHtmlTransformer &&
+        (0, devkit_1.joinPathFragments)(context.workspaceRoot, normalizedIndexHtmlTransformer);
     if (pathToIndexFileTransformer && !(0, fs_1.existsSync)(pathToIndexFileTransformer)) {
         throw new Error(`File containing Index File Transformer function Not Found!\n Please ensure the path to the file containing the function is correct: \n${pathToIndexFileTransformer}`);
     }

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

@@ -746,6 +746,25 @@ nx g @nx/angular:lib ui
 <span># Add a component</span>
 nx g &#64;nx/angular:component ui/src/lib/button</pre>
           </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project <%= appName %> --web</pre>
+          </details>
           <details>
             <summary>
               <svg

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

@@ -749,6 +749,25 @@ nx g @nx/angular:lib ui
 <span># Add a component</span>
 nx g &#64;nx/angular:component ui/src/lib/button</pre>
           </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project <%= appName %> --web</pre>
+          </details>
           <details>
             <summary>
               <svg

package/src/generators/host/host.js

@@ -8,6 +8,7 @@ const application_1 = require("../application/application");
 const remote_1 = require("../remote/remote");
 const setup_mf_1 = require("../setup-mf/setup-mf");
 const lib_1 = require("./lib");
+const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
 async function host(tree, options) {
     return await hostInternal(tree, {
         projectNameAndRootFormat: 'derived',
@@ -90,6 +91,7 @@ async function hostInternal(tree, schema) {
             typescriptConfiguration,
         });
     }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/remote/remote.js

@@ -8,6 +8,7 @@ const application_1 = require("../application/application");
 const setup_mf_1 = require("../setup-mf/setup-mf");
 const lib_1 = require("./lib");
 const versions_1 = require("@nx/js/src/utils/versions");
+const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
 async function remote(tree, options) {
     return await remoteInternal(tree, {
         projectNameAndRootFormat: 'derived',
@@ -68,6 +69,7 @@ async function remoteInternal(tree, schema) {
         });
         installTasks.push(ssrInstallTask);
     }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/utils/add-mf-env-to-inputs.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function addMfEnvToTargetDefaultInputs(tree: Tree): void;

package/src/generators/utils/add-mf-env-to-inputs.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addMfEnvToTargetDefaultInputs = void 0;
+const devkit_1 = require("@nx/devkit");
+function addMfEnvToTargetDefaultInputs(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const webpackExecutor = '@nx/angular:webpack-browser';
+    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults[webpackExecutor] ??= {};
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [];
+    let mfEnvVarExists = false;
+    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+        if (typeof input === 'object' && input['env'] === mfEnvVar) {
+            mfEnvVarExists = true;
+            break;
+        }
+    }
+    if (!mfEnvVarExists) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+        (0, devkit_1.updateNxJson)(tree, nxJson);
+    }
+}
+exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const add_mf_env_to_inputs_1 = require("../../generators/utils/add-mf-env-to-inputs");
+async function default_1(tree) {
+    if (!isWebpackBrowserUsed(tree)) {
+        return;
+    }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;
+function isWebpackBrowserUsed(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const project of projects.values()) {
+        const targets = project.targets;
+        for (const [_, target] of Object.entries(targets)) {
+            if (target.executor === '@nx/angular:webpack-browser' &&
+                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
+                return true;
+            }
+        }
+    }
+    return false;
+}