@nx/angular 18.3.0-canary.20240405-fc8d5ba → 18.3.0-canary.20240409-32144bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "18.3.0-canary.20240405-fc8d5ba",
+  "version": "18.3.0-canary.20240409-32144bb",
   "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- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -78,14 +78,14 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "18.3.0-canary.20240405-fc8d5ba",
-    "@nx/js": "18.3.0-canary.20240405-fc8d5ba",
-    "@nx/eslint": "18.3.0-canary.20240405-fc8d5ba",
-    "@nx/webpack": "18.3.0-canary.20240405-fc8d5ba",
-    "@nx/web": "18.3.0-canary.20240405-fc8d5ba",
-    "@nx/workspace": "18.3.0-canary.20240405-fc8d5ba",
+    "@nx/devkit": "18.3.0-canary.20240409-32144bb",
+    "@nx/js": "18.3.0-canary.20240409-32144bb",
+    "@nx/eslint": "18.3.0-canary.20240409-32144bb",
+    "@nx/webpack": "18.3.0-canary.20240409-32144bb",
+    "@nx/web": "18.3.0-canary.20240409-32144bb",
+    "@nx/workspace": "18.3.0-canary.20240409-32144bb",
     "piscina": "^4.4.0",
-    "@nrwl/angular": "18.3.0-canary.20240405-fc8d5ba"
+    "@nrwl/angular": "18.3.0-canary.20240409-32144bb"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/src/executors/module-federation-dev-server/lib/start-dev-remotes.d.ts

@@ -1,9 +1,5 @@
 import { type Schema } from '../schema';
 import { type ExecutorContext, type ProjectConfiguration } from '@nx/devkit';
-export declare function startDevRemotes(remotes: {
-    remotePorts: any[];
-    staticRemotes: string[];
-    devRemotes: string[];
-}, workspaceProjects: Record<string, ProjectConfiguration>, options: Schema, context: ExecutorContext): Promise<AsyncIterable<{
+export declare function startRemotes(remotes: string[], workspaceProjects: Record<string, ProjectConfiguration>, options: Schema, context: ExecutorContext, target?: 'serve' | 'serve-static'): Promise<AsyncIterable<{
     success: boolean;
 }>[]>;

package/src/executors/module-federation-dev-server/lib/start-dev-remotes.js

@@ -1,29 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.startDevRemotes = void 0;
+exports.startRemotes = void 0;
 const devkit_1 = require("@nx/devkit");
-async function startDevRemotes(remotes, workspaceProjects, options, context) {
-    const devRemotesIters = [];
-    for (const app of remotes.devRemotes) {
-        if (!workspaceProjects[app].targets?.['serve']) {
-            throw new Error(`Could not find "serve" target in "${app}" project.`);
+async function startRemotes(remotes, workspaceProjects, options, context, target = 'serve') {
+    const remoteIters = [];
+    for (const app of remotes) {
+        if (!workspaceProjects[app].targets?.[target]) {
+            throw new Error(`Could not find "${target}" target in "${app}" project.`);
         }
-        else if (!workspaceProjects[app].targets?.['serve'].executor) {
-            throw new Error(`Could not find executor for "serve" target in "${app}" project.`);
+        else if (!workspaceProjects[app].targets?.[target].executor) {
+            throw new Error(`Could not find executor for "${target}" target in "${app}" project.`);
         }
-        const [collection, executor] = workspaceProjects[app].targets['serve'].executor.split(':');
+        const [collection, executor] = workspaceProjects[app].targets[target].executor.split(':');
         const isUsingModuleFederationDevServerExecutor = executor.includes('module-federation-dev-server');
-        devRemotesIters.push(await (0, devkit_1.runExecutor)({
+        remoteIters.push(await (0, devkit_1.runExecutor)({
             project: app,
-            target: 'serve',
+            target,
             configuration: context.configurationName,
         }, {
-            verbose: options.verbose ?? false,
+            ...(target === 'serve' ? { verbose: options.verbose ?? false } : {}),
             ...(isUsingModuleFederationDevServerExecutor
                 ? { isInitialHost: false }
                 : {}),
         }, context));
     }
-    return devRemotesIters;
+    return remoteIters;
 }
-exports.startDevRemotes = startDevRemotes;
+exports.startRemotes = startRemotes;

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

@@ -70,7 +70,8 @@ async function* moduleFederationDevServerExecutor(schema, context) {
     }
     const staticRemotesConfig = (0, lib_1.parseStaticRemotesConfig)(remotes.staticRemotes, context);
     await (0, lib_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options);
-    const devRemoteIters = await (0, lib_1.startDevRemotes)(remotes, workspaceProjects, options, context);
+    const devRemoteIters = await (0, lib_1.startRemotes)(remotes.devRemotes, workspaceProjects, options, context, 'serve');
+    const dynamicRemoteIters = await (0, lib_1.startRemotes)(remotes.dynamicRemotes, workspaceProjects, options, context, 'serve-static');
     const staticRemotesIter = remotes.staticRemotes.length > 0
         ? (0, lib_1.startStaticRemotesFileServer)(staticRemotesConfig, context, options)
         : undefined;
@@ -78,7 +79,7 @@ async function* moduleFederationDevServerExecutor(schema, context) {
         ...v,
         baseUrl: undefined,
     }));
-    return yield* (0, async_iterable_1.combineAsyncIterables)(removeBaseUrlEmission(currIter), ...devRemoteIters.map(removeBaseUrlEmission), ...(staticRemotesIter ? [removeBaseUrlEmission(staticRemotesIter)] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+    return yield* (0, async_iterable_1.combineAsyncIterables)(removeBaseUrlEmission(currIter), ...devRemoteIters.map(removeBaseUrlEmission), ...dynamicRemoteIters.map(removeBaseUrlEmission), ...(staticRemotesIter ? [removeBaseUrlEmission(staticRemotesIter)] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;

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

@@ -14,7 +14,7 @@ const config: ModuleFederationConfig = {
    * declare module 'my-external-remote';
    *
    */
-  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
+  remotes: [<% if (federationType === 'static') { 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/files/webpack/module-federation.config.js__tmpl__

@@ -12,7 +12,7 @@ module.exports = {
    * declare module 'my-external-remote';
    *
    */
-  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
+  remotes: [<% if (federationType === 'static') { 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/add-remote-to-host.d.ts

@@ -1,4 +1,9 @@
 import { Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
+export type AddRemoteOptions = {
+    host: string;
+    appName: string;
+    standalone: boolean;
+    port: number;
+};
 export declare function checkIsCommaNeeded(mfRemoteText: string): boolean;
-export declare function addRemoteToHost(tree: Tree, options: Schema): void;
+export declare function addRemoteToHost(tree: Tree, options: AddRemoteOptions): void;

package/src/generators/setup-mf/lib/add-remote-to-host.js

@@ -27,19 +27,6 @@ function addRemoteToHost(tree, options) {
         else if (hostFederationType === 'dynamic') {
             addRemoteToDynamicHost(tree, options, pathToMFManifest);
         }
-        // const declarationFilePath = joinPathFragments(
-        //   hostProject.sourceRoot,
-        //   'remotes.d.ts'
-        // );
-        //
-        // const declarationFileContent =
-        //   (tree.exists(declarationFilePath)
-        //     ? tree.read(declarationFilePath, 'utf-8')
-        //     : '') +
-        //   `\ndeclare module '${options.appName}/${
-        //     options.standalone ? `Routes` : `Module`
-        //   }';`;
-        // tree.write(declarationFilePath, declarationFileContent);
         addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType);
     }
 }
@@ -47,8 +34,8 @@ exports.addRemoteToHost = addRemoteToHost;
 function determineHostFederationType(tree, pathToMfManifest) {
     return tree.exists(pathToMfManifest) ? 'dynamic' : 'static';
 }
-function addRemoteToStaticHost(tree, options, hostProject, isHostUsingTypescrpt) {
-    const hostMFConfigPath = (0, devkit_1.joinPathFragments)(hostProject.root, isHostUsingTypescrpt
+function addRemoteToStaticHost(tree, options, hostProject, isHostUsingTypescript) {
+    const hostMFConfigPath = (0, devkit_1.joinPathFragments)(hostProject.root, isHostUsingTypescript
         ? 'module-federation.config.ts'
         : 'module-federation.config.js');
     if (!hostMFConfigPath || !tree.exists(hostMFConfigPath)) {

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

@@ -18,6 +18,7 @@ function generateWebpackConfig(tree, options, appRoot, remotesWithPorts) {
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToWebpackTemplateFiles}`), appRoot, {
         tmpl: '',
         type: options.mfType,
+        federationType: options.federationType,
         name: options.appName,
         remotes: remotesWithPorts ?? [],
         projectRoot: appRoot,

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

@@ -11,11 +11,8 @@ function updateHostAppRoutes(tree, options) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const { sourceRoot } = (0, project_configuration_1.readProjectConfiguration)(tree, options.appName);
-    const remoteRoutes = options.remotes && Array.isArray(options.remotes)
-        ? options.remotes.reduce((routes, remote) => `${routes}\n<li><a routerLink='${remote}'>${(0, devkit_1.names)(remote).className}</a></li>`, '')
-        : '';
     tree.write((0, devkit_1.joinPathFragments)(sourceRoot, 'app/app.component.html'), `<ul class="remote-menu">
-<li><a routerLink="/">Home</a></li>${remoteRoutes}
+<li><a routerLink="/">Home</a></li>
 </ul>
 <router-outlet></router-outlet>
 `);

package/src/generators/setup-mf/setup-mf.js

@@ -9,7 +9,12 @@ async function setupMf(tree, rawOptions) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
     let installTask = () => { };
     if (options.mfType === 'remote') {
-        (0, lib_1.addRemoteToHost)(tree, options);
+        (0, lib_1.addRemoteToHost)(tree, {
+            appName: options.appName,
+            host: options.host,
+            standalone: options.standalone,
+            port: options.port,
+        });
         (0, lib_1.addRemoteEntry)(tree, options, projectConfig.root);
         (0, lib_1.removeDeadCodeFromRemote)(tree, options);
         (0, lib_1.setupTspathForRemote)(tree, options);
@@ -24,6 +29,14 @@ async function setupMf(tree, rawOptions) {
     if (options.mfType === 'host') {
         (0, lib_1.setupHostIfDynamic)(tree, options);
         (0, lib_1.updateHostAppRoutes)(tree, options);
+        for (const { remoteName, port } of remotesWithPorts) {
+            (0, lib_1.addRemoteToHost)(tree, {
+                appName: remoteName,
+                host: options.appName,
+                standalone: options.standalone,
+                port,
+            });
+        }
         installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });
     }
     if (!options.skipE2E) {