@nx/angular 17.0.1 → 17.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.0.1",
+  "version": "17.0.3",
   "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": {
@@ -79,15 +79,15 @@
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
     "enquirer": "^2.3.6",
-    "@nx/devkit": "17.0.1",
-    "@nx/cypress": "17.0.1",
-    "@nx/jest": "17.0.1",
-    "@nx/js": "17.0.1",
-    "@nx/eslint": "17.0.1",
-    "@nx/webpack": "17.0.1",
-    "@nx/web": "17.0.1",
-    "@nx/workspace": "17.0.1",
-    "@nrwl/angular": "17.0.1"
+    "@nx/devkit": "17.0.3",
+    "@nx/cypress": "17.0.3",
+    "@nx/jest": "17.0.3",
+    "@nx/js": "17.0.3",
+    "@nx/eslint": "17.0.3",
+    "@nx/webpack": "17.0.3",
+    "@nx/web": "17.0.3",
+    "@nx/workspace": "17.0.3",
+    "@nrwl/angular": "17.0.3"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 14.0.0 < 17.0.0",

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

@@ -13,7 +13,8 @@ const module_federation_2 = require("@nx/webpack/src/utils/module-federation");
 const child_process_1 = require("child_process");
 const rxjs_1 = require("rxjs");
 function executeModuleFederationDevServerBuilder(schema, context) {
-    const nxBin = require.resolve('nx');
+    // Force Node to resolve to look for the nx binary that is inside node_modules
+    const nxBin = require.resolve('nx/bin/nx');
     const { ...options } = schema;
     const projectGraph = (0, devkit_1.readCachedProjectGraph)();
     const { projects: workspaceProjects } = (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph);

package/src/builders/utilities/webpack.js

@@ -6,7 +6,9 @@ const internal_1 = require("@nx/js/src/internal");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 async function mergeCustomWebpackConfig(baseWebpackConfig, pathToWebpackConfig, options, target) {
-    const customWebpackConfiguration = resolveCustomWebpackConfig(pathToWebpackConfig, (0, path_1.join)(devkit_1.workspaceRoot, options.tsConfig));
+    const customWebpackConfiguration = resolveCustomWebpackConfig(pathToWebpackConfig, options.tsConfig.startsWith(devkit_1.workspaceRoot)
+        ? options.tsConfig
+        : (0, path_1.join)(devkit_1.workspaceRoot, options.tsConfig));
     // The extra Webpack configuration file can also export a Promise, for instance:
     // `module.exports = new Promise(...)`. If it exports a single object, but not a Promise,
     // then await will just resolve that object.

package/src/generators/application/files/standalone-components/src/app/app.config.ts__tpl__

@@ -1,4 +1,4 @@
-import { ApplicationConfig } from '@angular/core';<% if (routing) { %>
+import { ApplicationConfig } from <% if (installedAngularInfo.major >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
 import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';
 import { appRoutes } from './app.routes';<% } %>
 

package/src/generators/application/files/standalone-components/src/main.ts__tpl__

@@ -1,5 +1,11 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { AppComponent } from './app/app.component';<% if(installedAngularInfo.major === 14) { %>
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+
+if(environment.production) {
+  enableProdMode();
+}<% } %>
 
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

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

@@ -8,21 +8,28 @@ async function addE2e(tree, options) {
     if (options.e2eTestRunner === 'cypress') {
         // TODO: This can call `@nx/web:static-config` generator when ready
         addFileServerTarget(tree, options, 'serve-static');
-        await (0, cypress_1.cypressProjectGenerator)(tree, {
-            name: options.e2eProjectName,
-            directory: options.e2eProjectRoot,
-            // the name and root are already normalized, instruct the generator to use them as is
-            projectNameAndRootFormat: 'as-provided',
-            project: options.name,
+        (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+            projectType: 'application',
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            tags: [],
+            implicitDependencies: [options.name],
+        });
+        await (0, cypress_1.configurationGenerator)(tree, {
+            project: options.e2eProjectName,
+            directory: 'src',
             linter: options.linter,
-            standaloneConfig: options.standaloneConfig,
             skipPackageJson: options.skipPackageJson,
             skipFormat: true,
+            devServerTarget: `${options.name}:serve:development`,
+            rootProject: options.rootProject,
         });
     }
     else if (options.e2eTestRunner === 'playwright') {
         const { configurationGenerator: playwrightConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
         (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+            projectType: 'application',
             root: options.e2eProjectRoot,
             sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
             targets: {},
@@ -38,6 +45,7 @@ async function addE2e(tree, options) {
             setParserOptionsProject: options.setParserOptionsProject,
             webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
             webServerAddress: `http://localhost:${options.port ?? 4200}`,
+            rootProject: options.rootProject,
         });
     }
 }

package/src/generators/federate-module/schema.json

@@ -12,22 +12,22 @@
   ],
   "type": "object",
   "properties": {
-    "name": {
-      "description": "The name of the module.",
+    "path": {
       "type": "string",
       "$default": {
         "$source": "argv",
         "index": 0
       },
+      "description": "The path to locate the federated module.",
+      "x-prompt": "What is the path to the module to be federated?"
+    },
+    "name": {
+      "description": "The name of the module.",
+      "type": "string",
       "x-prompt": "What name would you like to use for the module?",
       "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
-    "path": {
-      "type": "string",
-      "description": "The path to locate the federated module.",
-      "x-prompt": "What is the path to the module to be federated?"
-    },
     "remote": {
       "type": "string",
       "description": "The name of the remote.",

package/src/generators/ng-add/migrators/projects/e2e.migrator.js

@@ -228,12 +228,20 @@ class E2eMigrator extends project_migrator_1.ProjectMigrator {
     }
     async migrateCypressE2eProject() {
         const oldCypressConfigFilePath = this.getOldCypressConfigFilePath();
-        await (0, cypress_1.cypressProjectGenerator)(this.tree, {
-            name: this.project.name,
-            project: this.appName,
+        (0, devkit_1.addProjectConfiguration)(this.tree, this.project.name, {
+            projectType: 'application',
+            root: this.project.newRoot,
+            sourceRoot: this.project.newSourceRoot,
+            targets: {},
+            tags: [],
+            implicitDependencies: [this.appName],
+        });
+        await (0, cypress_1.configurationGenerator)(this.tree, {
+            project: this.project.name,
             linter: this.isProjectUsingEsLint ? eslint_1.Linter.EsLint : eslint_1.Linter.None,
-            standaloneConfig: true,
             skipFormat: true,
+            // any target would do, we replace it later with the target existing in the project being migrated
+            devServerTarget: `${this.appName}:serve`,
         });
         const cypressConfigFilePath = this.updateOrCreateCypressConfigFile(oldCypressConfigFilePath);
         this.updateCypressProjectConfiguration(cypressConfigFilePath);
@@ -258,34 +266,14 @@ class E2eMigrator extends project_migrator_1.ProjectMigrator {
         return cypressConfigFilePath;
     }
     updateCypressProjectConfiguration(cypressConfigPath) {
-        /**
-         * The `cypressProjectGenerator` function normalizes the project name. The
-         * migration keeps the names for existing projects as-is to avoid any
-         * confusion. The e2e project is technically new, but it's associated
-         * to an existing application, so we keep it familiar.
-         */
-        const generatedProjectName = (0, devkit_1.names)(this.project.name).fileName;
-        if (this.project.name !== generatedProjectName) {
-            // If the names are different, we "rename" the newly added project.
-            this.projectConfig = (0, devkit_1.readProjectConfiguration)(this.tree, generatedProjectName);
-            this.projectConfig.root = this.project.newRoot;
-            this.projectConfig.sourceRoot = this.project.newSourceRoot;
-            (0, devkit_1.removeProjectConfiguration)(this.tree, generatedProjectName);
-            (0, devkit_1.addProjectConfiguration)(this.tree, this.project.name, { ...this.projectConfig }, true);
-        }
-        else {
-            this.projectConfig = (0, devkit_1.readProjectConfiguration)(this.tree, this.project.name);
-        }
+        this.projectConfig = (0, devkit_1.readProjectConfiguration)(this.tree, this.project.name);
         if (this.isProjectUsingEsLint) {
             // the generated cypress project always generates a "lint" target,
             // in case the app was using a different name for it, we use it
-            const lintTarget = this.projectConfig.targets.lint;
             if (this.lintTargetName && this.lintTargetName !== 'lint') {
                 this.projectConfig.targets[this.lintTargetName] =
                     this.projectConfig.targets.lint;
             }
-            lintTarget.options.lintFilePatterns =
-                lintTarget.options.lintFilePatterns.map((pattern) => pattern.replace(`apps/${generatedProjectName}`, this.project.newRoot));
         }
         [this.targetNames.e2e, 'cypress-run', 'cypress-open'].forEach((target) => {
             if (this.appConfig.targets[target]) {

package/src/generators/setup-mf/files/host-files/app.component.spec.ts__tmpl__

@@ -10,9 +10,11 @@ describe('AppComponent', () => {
       imports: [
         RouterTestingModule.withRoutes([
           { path: '', component: NxWelcomeComponent },
-        ]),
-      ],
-      declarations: [AppComponent, NxWelcomeComponent],
+        ]),<% if (standalone) { %>
+        AppComponent,
+        NxWelcomeComponent,<% } %>
+      ],<% if (!standalone) { %>
+      declarations: [AppComponent, NxWelcomeComponent],<% } %>
     }).compileComponents();
   });
 
@@ -37,4 +39,4 @@ describe('AppComponent', () => {
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Welcome <%= appName %>');
   }));
-});
+});

package/src/generators/setup-mf/lib/fix-bootstrap.js

@@ -7,7 +7,7 @@ function fixBootstrap(tree, appRoot, options) {
     const mainFilePath = (0, devkit_1.joinPathFragments)(appRoot, 'src/main.ts');
     const bootstrapCode = tree.read(mainFilePath, 'utf-8');
     const installedAngularMajor = (0, version_utils_1.getInstalledAngularMajorVersion)(tree);
-    if (options.standalone) {
+    if (options.standalone && options.mfType === 'remote') {
         tree.write(`${appRoot}/src/bootstrap.ts`, standaloneBootstrapCode(installedAngularMajor === 14));
     }
     else {

package/src/generators/setup-mf/lib/update-host-app-routes.js

@@ -34,6 +34,7 @@ function updateHostAppRoutes(tree, options) {
     ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/host-files'), (0, devkit_1.joinPathFragments)(sourceRoot, 'app'), {
         appName: options.appName,
+        standalone: options.standalone,
         tmpl: '',
     });
 }

package/src/generators/utils/project.js

@@ -6,11 +6,11 @@ const get_npm_scope_1 = require("@nx/js/src/utils/package-json/get-npm-scope");
 function normalizeNewProjectPrefix(prefix, npmScope, fallbackPrefix) {
     // Prefix needs to be a valid html selector, if npmScope it's not valid, we don't default
     // to it and let it fall through to the Angular schematic to handle it
-    // https://github.com/angular/angular-cli/blob/1c634cd327e5a850553b258aa2d5e6a6b2c75c65/packages/schematics/angular/component/index.ts#L130
-    const htmlSelectorRegex = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
+    // https://github.com/angular/angular-cli/blob/aa9f0528f174e856a4923cb24861fdf6e6f96b48/packages/schematics/angular/component/index.ts#L64
+    const htmlSelectorRegex = /^[a-zA-Z][.0-9a-zA-Z]*((:?-[0-9]+)*|(:?-[a-zA-Z][.0-9a-zA-Z]*(:?-[0-9]+)*)*)$/;
     if (prefix) {
         if (!htmlSelectorRegex.test(prefix)) {
-            throw new Error('The provided "prefix" is invalid. The prefix must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.');
+            throw new Error('The provided "prefix" is invalid. The prefix must start with a letter, and must contain only alphanumeric characters or dashes.');
         }
         return prefix;
     }
@@ -23,7 +23,7 @@ There are two options that can be followed to resolve this issue:
 
 If you encountered this error when creating a new Nx Workspace, the workspace name or "npmScope" is invalid to use as the selector prefix for the application being generated.
 
-Valid selector prefixes must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.`);
+Valid selector prefixes must start with a letter, and must contain only alphanumeric characters or dashes.`);
     }
     return npmScope || fallbackPrefix;
 }

package/src/utils/mf/utils.js

@@ -30,7 +30,13 @@ function getFunctionDeterminateRemoteUrl(isServer = false) {
     const target = 'serve';
     const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.mjs';
     return function (remote) {
-        const remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
+        let remoteConfiguration = null;
+        try {
+            remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
+        }
+        catch (e) {
+            throw new Error(`Cannot find remote "${remote}". Check that the remote name is correct in your module federation config file.\n`);
+        }
         const serveTarget = remoteConfiguration?.targets?.[target];
         if (!serveTarget) {
             throw new Error(`Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "serve" target.\n