@nx/angular 17.0.0-beta.8 → 17.0.0-rc.0

package/package.json

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

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

@@ -1,5 +1,5 @@
 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>;
+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

@@ -9,12 +9,41 @@ 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 find_matching_projects_1 = require("nx/src/utils/find-matching-projects");
+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');
     const { ...options } = schema;
     const projectGraph = (0, devkit_1.readCachedProjectGraph)();
     const { projects: workspaceProjects } = (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
     const project = workspaceProjects[context.target.project];
+    const staticFileServer = (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({
+        port: options.port,
+        host: options.host,
+        ssl: options.ssl,
+        buildTarget: options.browserTarget,
+        parallel: false,
+        spa: false,
+        withDeps: false,
+        cors: true,
+    }, {
+        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)(),
+    })));
+    const webpackDevServer = (0, webpack_dev_server_impl_1.executeWebpackDevServerBuilder)(options, context);
+    const currExecutor = options.static ? staticFileServer : webpackDevServer;
+    if (options.isInitialHost === false) {
+        return currExecutor;
+    }
     let pathToManifestFile = (0, path_1.join)(context.workspaceRoot, project.sourceRoot, 'assets/module-federation.manifest.json');
     if (options.pathToManifestFile) {
         const userPathToManifestFile = (0, path_1.join)(context.workspaceRoot, options.pathToManifestFile);
@@ -27,47 +56,80 @@ function executeModuleFederationDevServerBuilder(schema, context) {
         pathToManifestFile = userPathToManifestFile;
     }
     (0, module_federation_1.validateDevRemotes)(options, workspaceProjects);
-    const remotesToSkip = new Set((0, find_matching_projects_1.findMatchingProjects)(options.skipRemotes, projectGraph.nodes) ?? []);
-    if (remotesToSkip.size > 0) {
-        devkit_1.logger.info(`Remotes not served automatically: ${[...remotesToSkip].join(', ')}`);
+    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);
+    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 staticRemotes = (0, module_federation_1.getStaticRemotes)(project, context, workspaceProjects, remotesToSkip);
-    const dynamicRemotes = (0, module_federation_1.getDynamicRemotes)(project, context, workspaceProjects, remotesToSkip, pathToManifestFile);
-    const remotes = [...staticRemotes, ...dynamicRemotes];
-    const devServeRemotes = !options.devRemotes
-        ? []
-        : Array.isArray(options.devRemotes)
-            ? (0, find_matching_projects_1.findMatchingProjects)(options.devRemotes, projectGraph.nodes)
-            : (0, find_matching_projects_1.findMatchingProjects)([options.devRemotes], projectGraph.nodes);
-    for (const remote of remotes) {
-        const isDev = devServeRemotes.includes(remote);
-        const target = isDev ? 'serve' : 'serve-static';
-        if (!workspaceProjects[remote].targets?.[target]) {
-            throw new Error(`Could not find "${target}" target in "${remote}" project.`);
+    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[remote].targets?.[target].executor) {
-            throw new Error(`Could not find executor for "${target}" target in "${remote}" project.`);
+        else if (!workspaceProjects[app].targets?.['serve'].executor) {
+            throw new Error(`Could not find executor for "serve" target in "${app}" project.`);
         }
         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);
-            if (schema.additionalProperties || 'verbose' in schema.properties) {
-                runOptions.verbose = options.verbose;
-            }
+        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;
         }
-        (0, ngcli_adapter_1.scheduleTarget)(context.workspaceRoot, {
-            project: remote,
-            target,
+        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 '${remote}' failed to serve correctly due to the following: \r\n${err.toString()}`);
+                throw new Error(`Remote '${app}' failed to serve correctly due to the following: \r\n${err.toString()}`);
             });
         });
+        devRemotes$.push(serve$);
     }
-    return (0, webpack_dev_server_impl_1.executeWebpackDevServerBuilder)(options, context);
+    return devRemotes$.length > 0
+        ? (0, rxjs_1.combineLatest)([...devRemotes$]).pipe((0, rxjs_1.concatMap)(() => currExecutor))
+        : currExecutor;
 }
 exports.executeModuleFederationDevServerBuilder = executeModuleFederationDevServerBuilder;
 exports.default = require('@angular-devkit/architect').createBuilder(executeModuleFederationDevServerBuilder);

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

@@ -20,4 +20,6 @@ export interface Schema {
   devRemotes?: string[];
   skipRemotes?: string[];
   pathToManifestFile?: string;
+  static?: boolean;
+  isInitialHost?: boolean;
 }

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

@@ -122,6 +122,16 @@
     "pathToManifestFile": {
       "type": "string",
       "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+    },
+    "static": {
+      "type": "boolean",
+      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for remote applications that are also host applications."
+    },
+    "isInitialHost": {
+      "type": "boolean",
+      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "default": true,
+      "x-priority": "internal"
     }
   },
   "additionalProperties": false,