@nx/angular 17.0.0 → 17.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.0.0",
+  "version": "17.0.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": {
@@ -79,15 +79,15 @@
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
     "enquirer": "^2.3.6",
-    "@nx/devkit": "17.0.0",
-    "@nx/cypress": "17.0.0",
-    "@nx/jest": "17.0.0",
-    "@nx/js": "17.0.0",
-    "@nx/eslint": "17.0.0",
-    "@nx/webpack": "17.0.0",
-    "@nx/web": "17.0.0",
-    "@nx/workspace": "17.0.0",
-    "@nrwl/angular": "17.0.0"
+    "@nx/devkit": "17.0.2",
+    "@nx/cypress": "17.0.2",
+    "@nx/jest": "17.0.2",
+    "@nx/js": "17.0.2",
+    "@nx/eslint": "17.0.2",
+    "@nx/webpack": "17.0.2",
+    "@nx/web": "17.0.2",
+    "@nx/workspace": "17.0.2",
+    "@nrwl/angular": "17.0.2"
   },
   "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,27 @@ 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`,
         });
     }
     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: {},

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/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