@nx/angular 17.1.1 → 17.2.0-beta.0

package/migrations.json

@@ -1489,6 +1489,22 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "17.1.3-jest": {
+      "version": "17.1.3-beta.0",
+      "requires": {
+        "@angular-devkit/build-angular": ">=13.0.0 <18.0.0",
+        "@angular/compiler-cli": ">=13.0.0 <18.0.0",
+        "@angular/core": ">=13.0.0 <18.0.0",
+        "@angular/platform-browser-dynamic": ">=13.0.0 <18.0.0",
+        "jest": "^29.0.0"
+      },
+      "packages": {
+        "jest-preset-angular": {
+          "version": "~13.1.4",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.1.1",
+  "version": "17.2.0-beta.0",
   "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.1.1",
-    "@nx/cypress": "17.1.1",
-    "@nx/jest": "17.1.1",
-    "@nx/js": "17.1.1",
-    "@nx/eslint": "17.1.1",
-    "@nx/webpack": "17.1.1",
-    "@nx/web": "17.1.1",
-    "@nx/workspace": "17.1.1",
-    "@nrwl/angular": "17.1.1"
+    "@nx/devkit": "17.2.0-beta.0",
+    "@nx/cypress": "17.2.0-beta.0",
+    "@nx/jest": "17.2.0-beta.0",
+    "@nx/js": "17.2.0-beta.0",
+    "@nx/eslint": "17.2.0-beta.0",
+    "@nx/webpack": "17.2.0-beta.0",
+    "@nx/web": "17.2.0-beta.0",
+    "@nx/workspace": "17.2.0-beta.0",
+    "@nrwl/angular": "17.2.0-beta.0"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/src/builders/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -1,5 +1,5 @@
-import { executeWebpackDevServerBuilder } from '../webpack-dev-server/webpack-dev-server.impl';
 import type { Schema } from './schema';
+import { executeWebpackDevServerBuilder } from '../webpack-dev-server/webpack-dev-server.impl';
 export declare function executeModuleFederationDevServerBuilder(schema: Schema, context: import('@angular-devkit/architect').BuilderContext): ReturnType<typeof executeWebpackDevServerBuilder | any>;
 declare const _default: any;
 export default _default;

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

@@ -2,20 +2,147 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.executeModuleFederationDevServerBuilder = void 0;
 const devkit_1 = require("@nx/devkit");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
-const child_process_1 = require("child_process");
-const fs_1 = require("fs");
 const ngcli_adapter_1 = require("nx/src/adapter/ngcli-adapter");
-const executor_utils_1 = require("nx/src/command-line/run/executor-utils");
+const webpack_dev_server_impl_1 = require("../webpack-dev-server/webpack-dev-server.impl");
 const project_graph_1 = require("nx/src/project-graph/project-graph");
+const executor_utils_1 = require("nx/src/command-line/run/executor-utils");
+const module_federation_1 = require("../utilities/module-federation");
+const fs_1 = require("fs");
 const path_1 = require("path");
+const module_federation_2 = require("@nx/webpack/src/utils/module-federation");
+const child_process_1 = require("child_process");
 const rxjs_1 = require("rxjs");
-const module_federation_2 = require("../utilities/module-federation");
-const webpack_dev_server_impl_1 = require("../webpack-dev-server/webpack-dev-server.impl");
+const fs_2 = require("fs");
+function buildStaticRemotes(remotes, nxBin, context, options) {
+    const mappedLocationOfRemotes = {};
+    for (const app of remotes.staticRemotes) {
+        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${app}`;
+    }
+    process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
+    const staticRemoteBuildPromise = new Promise((res) => {
+        devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
+        const staticProcess = (0, child_process_1.fork)(nxBin, [
+            'run-many',
+            `--target=build`,
+            `--projects=${remotes.staticRemotes.join(',')}`,
+            ...(context.target.configuration
+                ? [`--configuration=${context.target.configuration}`]
+                : []),
+            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
+        ], {
+            cwd: context.workspaceRoot,
+            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
+        });
+        staticProcess.stdout.on('data', (data) => {
+            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
+            if (stdoutString.includes('Successfully ran target build')) {
+                staticProcess.stdout.removeAllListeners('data');
+                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
+                res();
+            }
+        });
+        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
+        staticProcess.on('exit', (code) => {
+            if (code !== 0) {
+                throw new Error(`Remotes failed to build. See above for errors.`);
+            }
+        });
+        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
+        process.on('exit', () => staticProcess.kill('SIGTERM'));
+    });
+    return staticRemoteBuildPromise;
+}
+function startStaticRemotesFileServer(remotes, projectGraph, options, context) {
+    let shouldMoveToCommonLocation = false;
+    let commonOutputDirectory;
+    for (const app of remotes.staticRemotes) {
+        const outputPath = projectGraph.nodes[app].data.targets['build'].options.outputPath;
+        const directoryOfOutputPath = (0, path_1.dirname)(outputPath);
+        if (!commonOutputDirectory) {
+            commonOutputDirectory = directoryOfOutputPath;
+        }
+        else if (commonOutputDirectory !== directoryOfOutputPath) {
+            shouldMoveToCommonLocation = true;
+        }
+    }
+    if (shouldMoveToCommonLocation) {
+        commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
+        for (const app of remotes.staticRemotes) {
+            const outputPath = projectGraph.nodes[app].data.targets['build'].options.outputPath;
+            const outputPathParts = outputPath.split('/');
+            (0, fs_2.cpSync)(outputPath, (0, path_1.join)(commonOutputDirectory, outputPathParts[outputPathParts.length - 1]), {
+                force: true,
+                recursive: true,
+            });
+        }
+    }
+    const staticRemotesIter$ = (0, rxjs_1.from)(Promise.resolve().then(() => require('@nx/web/src/executors/file-server/file-server.impl'))).pipe((0, rxjs_1.switchMap)((fileServerExecutor) => fileServerExecutor.default({
+        cors: true,
+        watch: false,
+        staticFilePath: commonOutputDirectory,
+        parallel: false,
+        spa: false,
+        withDeps: false,
+        host: options.host,
+        port: options.staticRemotesPort,
+        ssl: options.ssl,
+        sslCert: options.sslCert,
+        sslKey: options.sslKey,
+    }, {
+        projectGraph,
+        root: context.workspaceRoot,
+        target: projectGraph.nodes[context.target.project].data.targets[context.target.target],
+        targetName: context.target.target,
+        projectName: context.target.project,
+        configurationName: context.target.configuration,
+        cwd: context.currentDirectory,
+        isVerbose: options.verbose,
+        projectsConfigurations: (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph),
+        nxJsonConfiguration: (0, devkit_1.readNxJson)(),
+    })));
+    return staticRemotesIter$;
+}
+function startDevRemotes(remotes, workspaceProjects, options, context) {
+    const devRemotes$ = [];
+    for (const app of remotes.devRemotes) {
+        if (!workspaceProjects[app].targets?.['serve']) {
+            throw new Error(`Could not find "serve" target in "${app}" project.`);
+        }
+        else if (!workspaceProjects[app].targets?.['serve'].executor) {
+            throw new Error(`Could not find executor for "serve" target in "${app}" project.`);
+        }
+        const runOptions = {};
+        const [collection, executor] = workspaceProjects[app].targets['serve'].executor.split(':');
+        const isUsingModuleFederationDevServerExecutor = executor.includes('module-federation-dev-server');
+        const { schema } = (0, executor_utils_1.getExecutorInformation)(collection, executor, devkit_1.workspaceRoot, workspaceProjects);
+        if ((options.verbose && schema.additionalProperties) ||
+            'verbose' in schema.properties) {
+            runOptions.verbose = options.verbose;
+        }
+        if (isUsingModuleFederationDevServerExecutor) {
+            runOptions.isInitialHost = false;
+        }
+        const serve$ = (0, ngcli_adapter_1.scheduleTarget)(context.workspaceRoot, {
+            project: app,
+            target: 'serve',
+            configuration: context.target.configuration,
+            runOptions,
+            projects: workspaceProjects,
+        }, options.verbose).then((obs) => {
+            obs.toPromise().catch((err) => {
+                throw new Error(`Remote '${app}' failed to serve correctly due to the following: \r\n${err.toString()}`);
+            });
+        });
+        devRemotes$.push(serve$);
+    }
+    return devRemotes$;
+}
 function executeModuleFederationDevServerBuilder(schema, context) {
     // Force Node to resolve to look for the nx binary that is inside node_modules
     const nxBin = require.resolve('nx/bin/nx');
     const options = normalizeOptions(schema);
+    options.staticRemotesPort ??= options.port + 1;
     const projectGraph = (0, devkit_1.readCachedProjectGraph)();
     const { projects: workspaceProjects } = (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
     const project = workspaceProjects[context.target.project];
@@ -37,7 +164,7 @@ function executeModuleFederationDevServerBuilder(schema, context) {
         configurationName: context.target.configuration,
         cwd: context.currentDirectory,
         isVerbose: options.verbose,
-        projectsConfigurations: (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph),
+        projectsConfigurations: { projects: workspaceProjects, version: 2 },
         nxJsonConfiguration: (0, devkit_1.readNxJson)(),
     })));
     const webpackDevServer = (0, webpack_dev_server_impl_1.executeWebpackDevServerBuilder)(options, context);
@@ -56,116 +183,30 @@ function executeModuleFederationDevServerBuilder(schema, context) {
         }
         pathToManifestFile = userPathToManifestFile;
     }
-    (0, module_federation_2.validateDevRemotes)(options, workspaceProjects);
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(project.targets.build.options.tsConfig, context.workspaceRoot, project.root, 'angular');
-    const remotes = (0, module_federation_1.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
+    (0, module_federation_1.validateDevRemotes)(options, workspaceProjects);
+    const moduleFederationConfig = (0, module_federation_2.getModuleFederationConfig)(project.targets.build.options.tsConfig, context.workspaceRoot, project.root, 'angular');
+    const remotes = (0, module_federation_2.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
         projectName: project.name,
         projectGraph,
         root: context.workspaceRoot,
     }, pathToManifestFile);
-    const staticRemoteBuildPromise = new Promise((res) => {
-        devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
-        const staticProcess = (0, child_process_1.fork)(nxBin, [
-            'run-many',
-            `--target=build`,
-            `--projects=${remotes.staticRemotes.join(',')}`,
-            ...(context.target.configuration
-                ? [`--configuration=${context.target.configuration}`]
-                : []),
-            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
-        ], {
-            cwd: context.workspaceRoot,
-            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
-        });
-        staticProcess.stdout.on('data', (data) => {
-            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
-            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
-            if (stdoutString.includes('Successfully ran target build')) {
-                staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
-                res();
+    if (remotes.devRemotes.length > 0 && !schema.staticRemotesPort) {
+        options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
+            const remotePort = projectGraph.nodes[r].data.targets['serve'].options.port;
+            if (remotePort >= portToUse) {
+                return remotePort + 1;
             }
-        });
-        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
-        staticProcess.on('exit', (code) => {
-            if (code !== 0) {
-                throw new Error(`Remotes failed to build. See above for errors.`);
-            }
-        });
-        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
-        process.on('exit', () => staticProcess.kill('SIGTERM'));
-    });
+        }, options.staticRemotesPort);
+    }
+    const staticRemoteBuildPromise = buildStaticRemotes(remotes, nxBin, context, options);
     return (0, rxjs_1.from)(staticRemoteBuildPromise).pipe((0, rxjs_1.concatMap)(() => {
-        let isCollectingStaticRemoteOutput = true;
-        for (const app of remotes.staticRemotes) {
-            const remoteProjectServeTarget = projectGraph.nodes[app].data.targets['serve-static'];
-            const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
-            let outWithErr = [];
-            const staticProcess = (0, child_process_1.fork)(nxBin, [
-                'run',
-                `${app}:serve-static${context.target.configuration
-                    ? `:${context.target.configuration}`
-                    : ''}`,
-                ...(isUsingModuleFederationDevServerExecutor
-                    ? [`--isInitialHost=false`]
-                    : []),
-            ], {
-                cwd: context.workspaceRoot,
-                stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
-            });
-            staticProcess.stdout.on('data', (data) => {
-                if (isCollectingStaticRemoteOutput) {
-                    outWithErr.push(data.toString());
-                }
-                else {
-                    outWithErr = null;
-                    staticProcess.stdout.removeAllListeners('data');
-                }
-            });
-            staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
-            staticProcess.on('exit', (code) => {
-                if (code !== 0) {
-                    devkit_1.logger.info(outWithErr.join(''));
-                    throw new Error(`Remote failed to start. See above for errors.`);
-                }
-            });
-            process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
-            process.on('exit', () => staticProcess.kill('SIGTERM'));
-        }
-        const devRemotes$ = [];
-        for (const app of remotes.devRemotes) {
-            if (!workspaceProjects[app].targets?.['serve']) {
-                throw new Error(`Could not find "serve" target in "${app}" project.`);
-            }
-            else if (!workspaceProjects[app].targets?.['serve'].executor) {
-                throw new Error(`Could not find executor for "serve" target in "${app}" project.`);
-            }
-            const runOptions = {};
-            const [collection, executor] = workspaceProjects[app].targets['serve'].executor.split(':');
-            const isUsingModuleFederationDevServerExecutor = executor.includes('module-federation-dev-server');
-            const { schema } = (0, executor_utils_1.getExecutorInformation)(collection, executor, devkit_1.workspaceRoot);
-            if ((options.verbose && schema.additionalProperties) ||
-                'verbose' in schema.properties) {
-                runOptions.verbose = options.verbose;
-            }
-            if (isUsingModuleFederationDevServerExecutor) {
-                runOptions.isInitialHost = false;
-            }
-            const serve$ = (0, ngcli_adapter_1.scheduleTarget)(context.workspaceRoot, {
-                project: app,
-                target: 'serve',
-                configuration: context.target.configuration,
-                runOptions,
-            }, options.verbose).then((obs) => {
-                obs.toPromise().catch((err) => {
-                    throw new Error(`Remote '${app}' failed to serve correctly due to the following: \r\n${err.toString()}`);
-                });
-            });
-            devRemotes$.push(serve$);
-        }
+        const staticRemotesIter$ = remotes.staticRemotes.length > 0
+            ? startStaticRemotesFileServer(remotes, projectGraph, options, context)
+            : (0, rxjs_1.from)(Promise.resolve());
+        const devRemotes$ = startDevRemotes(remotes, workspaceProjects, options, context);
         return devRemotes$.length > 0
-            ? (0, rxjs_1.combineLatest)([...devRemotes$]).pipe((0, rxjs_1.concatMap)(() => currExecutor))
-            : currExecutor;
+            ? (0, rxjs_1.combineLatest)([...devRemotes$, staticRemotesIter$]).pipe((0, rxjs_1.concatMap)(() => currExecutor))
+            : (0, rxjs_1.from)(staticRemotesIter$).pipe((0, rxjs_1.concatMap)(() => currExecutor));
     }));
 }
 exports.executeModuleFederationDevServerBuilder = executeModuleFederationDevServerBuilder;

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

@@ -22,6 +22,7 @@ interface BaseSchema {
   static?: boolean;
   isInitialHost?: boolean;
   parallel?: number;
+  staticRemotesPort?: number;
 }
 
 export type SchemaWithBrowserTarget = BaseSchema & {

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

@@ -142,6 +142,10 @@
     "parallel": {
       "type": "number",
       "description": "Max number of parallel processes for building static remotes"
+    },
+    "staticRemotesPort": {
+      "type": "number",
+      "description": "The port at which to serve the file-server for the static remotes."
     }
   },
   "additionalProperties": false,

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

@@ -51,7 +51,7 @@ function executeModuleFederationDevSSRBuilder(schema, context) {
         const runOptions = {};
         if (options.verbose) {
             const [collection, executor] = workspaceProjects[remote].targets[target].executor.split(':');
-            const { schema } = (0, executor_utils_1.getExecutorInformation)(collection, executor, devkit_1.workspaceRoot);
+            const { schema } = (0, executor_utils_1.getExecutorInformation)(collection, executor, devkit_1.workspaceRoot, workspaceProjects);
             if (schema.additionalProperties || 'verbose' in schema.properties) {
                 runOptions.verbose = options.verbose;
             }
@@ -79,6 +79,7 @@ function executeModuleFederationDevSSRBuilder(schema, context) {
                     target,
                     configuration: context.target.configuration,
                     runOptions,
+                    projects: workspaceProjects,
                 }, options.verbose).then((obs) => obs
                     .pipe((0, operators_1.tap)((result) => {
                     result.success && res();

package/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/write-package.transform.js

@@ -78,7 +78,11 @@ const nxWritePackageTransform = (options) => (0, transform_1.transformFromPromis
         }
         // Write a package.json in each secondary entry-point
         // This is need for esbuild to secondary entry-points in dist correctly.
-        await (0, fs_1.writeFile)(path.join(ngEntryPoint.destinationPath, 'package.json'), JSON.stringify({ module: relativeUnixFromDestPath(destinationFiles.fesm2022) }, undefined, 2));
+        await (0, fs_1.writeFile)(path.join(ngEntryPoint.destinationPath, 'package.json'), JSON.stringify({
+            module: relativeUnixFromDestPath(angularVersion.major < 16
+                ? destinationFiles.esm2020
+                : destinationFiles.esm2022),
+        }, undefined, 2));
     }
     devkit_1.logger.info(`Built ${ngEntryPoint.moduleId}`);
     return graph;

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

@@ -3,9 +3,11 @@ import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from
 @Component({
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  styleUrl: './app.component.<%= style %>',<% } else { %>
+  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>

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

@@ -7,9 +7,11 @@ import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
   imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  styleUrl: './app.component.<%= style %>',<% } else { %>
+  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>

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

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

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

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

package/src/generators/application/lib/create-files.js

@@ -7,8 +7,8 @@ const create_ts_config_1 = require("../../utils/create-ts-config");
 const test_runners_1 = require("../../../utils/test-runners");
 const version_utils_1 = require("../../utils/version-utils");
 async function createFiles(tree, options, rootOffset) {
-    const installedAngularInfo = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    const isUsingApplicationBuilder = installedAngularInfo.major >= 17 && options.bundler === 'esbuild';
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const isUsingApplicationBuilder = angularMajorVersion >= 17 && options.bundler === 'esbuild';
     const substitutions = {
         rootSelector: `${options.prefix}-root`,
         appName: options.name,
@@ -21,7 +21,7 @@ async function createFiles(tree, options, rootOffset) {
         minimal: options.minimal,
         nxWelcomeSelector: `${options.prefix}-nx-welcome`,
         rootTsConfig: (0, devkit_1.joinPathFragments)(rootOffset, (0, js_1.getRootTsConfigFileName)(tree)),
-        installedAngularInfo,
+        angularMajorVersion,
         rootOffset,
         isUsingApplicationBuilder,
         tpl: '',

package/src/generators/component/component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentGeneratorInternal = exports.componentGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const utils_1 = require("../utils");
+const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
 async function componentGenerator(tree, rawOptions) {
     await componentGeneratorInternal(tree, {
@@ -13,6 +14,7 @@ async function componentGenerator(tree, rawOptions) {
 exports.componentGenerator = componentGenerator;
 async function componentGeneratorInternal(tree, rawOptions) {
     const options = await (0, lib_1.normalizeOptions)(tree, rawOptions);
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), options.directory, {
         name: options.name,
         fileName: options.fileName,
@@ -26,6 +28,7 @@ async function componentGeneratorInternal(tree, rawOptions) {
         viewEncapsulation: options.viewEncapsulation,
         displayBlock: options.displayBlock,
         selector: options.selector,
+        angularMajorVersion,
         tpl: '',
     });
     if (options.skipTests) {

package/src/generators/component/files/__fileName__.ts__tpl__

@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';<% } %>
   standalone: true,
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>
-  templateUrl: './<%= fileName %>.html'<% } if(inlineStyle) { %>,
+  templateUrl: './<%= fileName %>.html'<% } if (angularMajorVersion < 17) { if(inlineStyle) { %>,
   styles: [<% if(displayBlock){ %>
     `
       :host {
@@ -14,7 +14,13 @@ import { CommonModule } from '@angular/common';<% } %>
       }
     `<% } %>
   ]<% } else if (style !== 'none') { %>,
-  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% } else { if(inlineStyle) { %>,
+  styles: `<% if(displayBlock){ %>
+    :host {
+      display: block;
+    }
+  <% } %>`<% } else if (style !== 'none') { %>,
+  styleUrl: './<%= fileName %>.<%= style %>'<% } %><% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })

package/src/generators/host/host.js

@@ -62,6 +62,7 @@ async function hostInternal(tree, schema) {
         prefix: options.prefix,
         typescriptConfiguration,
         standalone: options.standalone,
+        setParserOptionsProject: options.setParserOptionsProject,
     });
     let installTasks = [appInstallTask];
     if (options.ssr) {

package/src/generators/remote/files/common/pre-v17/src/main.server.ts__tmpl__

@@ -36,7 +36,7 @@ export function app(): express.Express {
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
   // serve static files
-  server.use('/', express.static(browserBundles, { maxAge: '1y' }));
+  server.get('*.*', express.static(browserBundles, { maxAge: '1y' }));
   server.use('/server', express.static(serverBundles, { maxAge: '1y' }));
 
   // All regular routes use the Universal engine

package/src/generators/remote/files/common/v17+/src/main.server.ts__tmpl__

@@ -28,7 +28,7 @@ export function app(): express.Express {
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.use('/', express.static(browserBundles, { maxAge: '1y' }));
+  server.get('*.*', express.static(browserBundles, { maxAge: '1y' }));
   // Serve static files from /server
   server.use('/server', express.static(serverBundles, { maxAge: '1y' }));
 

package/src/generators/remote/remote.js

@@ -53,6 +53,7 @@ async function remoteInternal(tree, schema) {
         standalone: options.standalone,
         prefix: options.prefix,
         typescriptConfiguration,
+        setParserOptionsProject: options.setParserOptionsProject,
     });
     const installSwcHelpersTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
         '@swc/helpers': versions_1.swcHelpersVersion,

package/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__

@@ -2,6 +2,18 @@ import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
   name: '<%= name %>',<% if(type === 'host') { %>
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>

package/src/generators/setup-mf/files/ts-webpack/tsconfig.lint.json__tmpl__

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2020"
+  },
+  "include": [
+    "src/main.ts",
+    <% if(type === "remote") { %> "src/remote-entry/<% if(standalone) { %>entry.routes.ts", <% } else { %> entry.module.ts", <% } } %>
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__

@@ -1,8 +1,20 @@
 module.exports = {
   name: '<%= name %>',<% if(type === 'host') { %>
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
     './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>
   },<% } %>
-}
+}

package/src/generators/setup-mf/lib/generate-config.js

@@ -23,5 +23,8 @@ function generateWebpackConfig(tree, options, appRoot, remotesWithPorts) {
         projectRoot: appRoot,
         standalone: options.standalone,
     });
+    if (!options.setParserOptionsProject) {
+        tree.delete((0, devkit_1.joinPathFragments)(appRoot, 'tsconfig.lint.json'));
+    }
 }
 exports.generateWebpackConfig = generateWebpackConfig;

package/src/generators/setup-mf/schema.d.ts

@@ -15,6 +15,7 @@ export interface Schema {
   standalone?: boolean;
   skipE2E?: boolean;
   typescriptConfiguration?: boolean;
+  setParserOptionsProject?: boolean;
 }
 
 export interface NormalizedOptions extends Schema {

package/src/generators/setup-mf/schema.json

@@ -78,6 +78,11 @@
       "type": "boolean",
       "description": "Whether the module federation configuration and webpack configuration files should use TS.",
       "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "default": false
     }
   },
   "required": ["appName", "mfType"],

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

@@ -5,10 +5,10 @@ const project_name_1 = require("@nx/cypress/src/utils/project-name");
 const devkit_1 = require("@nx/devkit");
 const stories_1 = require("../../stories/stories");
 async function generateStories(tree, options) {
-    const project = (0, devkit_1.readProjectConfiguration)(tree, options.name);
-    const e2eProjectName = (0, project_name_1.getE2eProjectName)(options.name, project.root, options.cypressDirectory);
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const e2eProjectName = (0, project_name_1.getE2eProjectName)(options.project, project.root, options.cypressDirectory);
     await (0, stories_1.angularStoriesGenerator)(tree, {
-        name: options.name,
+        name: options.project,
         generateCypressSpecs: options.configureCypress && options.generateCypressSpecs,
         cypressProject: e2eProjectName,
         ignorePaths: options.ignorePaths,

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

@@ -6,7 +6,7 @@ const versions_1 = require("../../../utils/versions");
 async function generateStorybookConfiguration(tree, options) {
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
     return await configurationGenerator(tree, {
-        name: options.name,
+        project: options.project,
         uiFramework: '@storybook/angular',
         configureCypress: options.configureCypress,
         linter: options.linter,

package/src/generators/storybook-configuration/schema.d.ts

@@ -4,7 +4,7 @@ export interface StorybookConfigurationOptions {
   configureStaticServe?: boolean;
   generateStories: boolean;
   linter: Linter;
-  name: string;
+  project: string;
   tsConfiguration?: boolean;
   skipFormat?: boolean;
   ignorePaths?: string[];

package/src/generators/storybook-configuration/schema.json

@@ -6,9 +6,9 @@
   "cli": "nx",
   "type": "object",
   "properties": {
-    "name": {
+    "project": {
       "type": "string",
-      "aliases": ["project", "projectName"],
+      "aliases": ["name", "projectName"],
       "description": "Project for which to generate Storybook configuration.",
       "$default": {
         "$source": "argv",
@@ -93,6 +93,6 @@
     }
   },
   "additionalProperties": false,
-  "required": ["name"],
+  "required": ["project"],
   "examplesFile": "../../../docs/storybook-configuration-examples.md"
 }

package/src/migrations/update-17-1-0/replace-nguniversal-engines.js

@@ -15,13 +15,18 @@ const UNIVERSAL_PACKAGES = [
  * @nguniversal/express-engine
  **/
 const NGUNIVERSAL_PACKAGE_REGEXP = /@nguniversal\/(common(\/engine)?|express-engine)/g;
+const serverExecutors = [
+    '@angular-devkit/build-angular:server',
+    '@nx/angular:webpack-server',
+];
 async function default_1(tree) {
     const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
     if (!UNIVERSAL_PACKAGES.some((pkg) => packageJson.dependencies?.[pkg] || packageJson.devDependencies?.[pkg])) {
         return;
     }
     const projects = await (0, projects_1.getProjectsFilteredByDependencies)(tree, [
-        'npm:@angular/core',
+        'npm:@nguniversal/common',
+        'npm:@nguniversal/express-engine',
     ]);
     for (const { project } of projects) {
         if (project.projectType !== 'application') {
@@ -29,7 +34,7 @@ async function default_1(tree) {
         }
         const serverMainFiles = new Map();
         for (const target of Object.values(project.targets ?? {})) {
-            if (target.executor !== '@angular-devkit/build-angular:server') {
+            if (!serverExecutors.includes(target.executor)) {
                 continue;
             }
             const outputPath = project.targets.build?.options?.outputPath;
@@ -46,19 +51,24 @@ async function default_1(tree) {
         const root = project.sourceRoot ?? `${project.root}/src`;
         const tokensFilePath = `${root}/express.tokens.ts`;
         (0, devkit_1.visitNotIgnoredFiles)(tree, root, (path) => {
-            const content = tree.read(path, 'utf8');
-            let updatedContent = content;
+            if (!path.endsWith('.ts') || path.endsWith('.d.ts')) {
+                return;
+            }
+            let content = tree.read(path, 'utf8');
+            if (!content.includes('@nguniversal/')) {
+                return;
+            }
             // Check if file is importing tokens
             if (content.includes('@nguniversal/express-engine/tokens')) {
                 hasExpressTokens ||= true;
-                let tokensFileRelativePath = (0, path_1.relative)((0, path_1.dirname)((0, devkit_1.normalizePath)(path)), (0, devkit_1.normalizePath)(tokensFilePath));
+                let tokensFileRelativePath = (0, devkit_1.normalizePath)((0, path_1.relative)((0, path_1.dirname)(path), tokensFilePath));
                 if (tokensFileRelativePath.charAt(0) !== '.') {
                     tokensFileRelativePath = './' + tokensFileRelativePath;
                 }
-                updatedContent = updatedContent.replaceAll('@nguniversal/express-engine/tokens', tokensFileRelativePath.slice(0, -3));
+                content = content.replaceAll('@nguniversal/express-engine/tokens', tokensFileRelativePath.slice(0, -3));
             }
-            updatedContent = updatedContent.replaceAll(NGUNIVERSAL_PACKAGE_REGEXP, '@angular/ssr');
-            tree.write(path, updatedContent);
+            content = content.replaceAll(NGUNIVERSAL_PACKAGE_REGEXP, '@angular/ssr');
+            tree.write(path, content);
         });
         // Replace server file and add tokens file if needed
         for (const [path, outputPath] of serverMainFiles.entries()) {

package/src/utils/mf/utils.js

@@ -30,6 +30,13 @@ function getFunctionDeterminateRemoteUrl(isServer = false) {
     const target = 'serve';
     const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.mjs';
     return function (remote) {
+        const mappedStaticRemotesFromEnv = process.env
+            .NX_MF_DEV_SERVER_STATIC_REMOTES
+            ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
+            : undefined;
+        if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
+            return `${mappedStaticRemotesFromEnv[remote]}/${remoteEntry}`;
+        }
         let remoteConfiguration = null;
         try {
             remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);

package/src/utils/versions.d.ts

@@ -20,7 +20,7 @@ export declare const postcssPresetEnvVersion = "~7.5.0";
 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.3";
+export declare const jestPresetAngularVersion = "~13.1.4";
 export declare const typesNodeVersion = "16.11.7";
 export declare const jasmineMarblesVersion = "^0.9.2";
 export declare const jsoncEslintParserVersion = "^2.1.0";

package/src/utils/versions.js

@@ -23,7 +23,7 @@ exports.postcssPresetEnvVersion = '~7.5.0';
 exports.postcssUrlVersion = '~10.1.3';
 exports.autoprefixerVersion = '^10.4.0';
 exports.tsNodeVersion = '10.9.1';
-exports.jestPresetAngularVersion = '~13.1.3';
+exports.jestPresetAngularVersion = '~13.1.4';
 exports.typesNodeVersion = '16.11.7';
 exports.jasmineMarblesVersion = '^0.9.2';
 exports.jsoncEslintParserVersion = '^2.1.0';