From 7ff91dc031c6140113adfec30f7a86d594468883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= Date: Mon, 8 Apr 2024 12:35:00 +0200 Subject: [PATCH] fix(angular): fix dynamic module federation generation --- .../module-federation.config.ts__tmpl__ | 2 +- .../module-federation.config.js__tmpl__ | 2 +- .../setup-mf/lib/add-remote-to-host.ts | 34 +++++++------------ .../setup-mf/lib/generate-config.ts | 1 + .../setup-mf/lib/update-host-app-routes.ts | 13 +------ .../src/generators/setup-mf/setup-mf.ts | 15 +++++++- 6 files changed, 31 insertions(+), 36 deletions(-) diff --git a/packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ b/packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ index f785a0535c8b3e..52d7d6cf9d122d 100644 --- a/packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ +++ b/packages/angular/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',<% } %> diff --git a/packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__ b/packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__ index 831bed36aa64fa..d2014b48c86e76 100644 --- a/packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__ +++ b/packages/angular/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',<% } %> diff --git a/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts b/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts index 4880fb46585d88..ffb94f3806d126 100644 --- a/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts +++ b/packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts @@ -6,7 +6,6 @@ import { Tree, updateJson, } from '@nx/devkit'; -import type { Schema } from '../schema'; import { ArrayLiteralExpression } from 'typescript'; import { insertImport } from '@nx/js'; import { addRoute } from '../../../utils/nx-devkit/route-utils'; @@ -14,6 +13,13 @@ import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript' let tsModule: typeof import('typescript'); +export type AddRemoteOptions = { + host: string; + appName: string; + standalone: boolean; + port: number; +}; + export function checkIsCommaNeeded(mfRemoteText: string) { const remoteText = mfRemoteText.replace(/\s+/g, ''); return !remoteText.endsWith(',]') @@ -23,7 +29,7 @@ export function checkIsCommaNeeded(mfRemoteText: string) { : false; } -export function addRemoteToHost(tree: Tree, options: Schema) { +export function addRemoteToHost(tree: Tree, options: AddRemoteOptions) { if (options.host) { const hostProject = readProjectConfiguration(tree, options.host); const pathToMFManifest = joinPathFragments( @@ -50,20 +56,6 @@ export function addRemoteToHost(tree: Tree, options: Schema) { 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); } } @@ -77,13 +69,13 @@ function determineHostFederationType( function addRemoteToStaticHost( tree: Tree, - options: Schema, + options: AddRemoteOptions, hostProject: ProjectConfiguration, - isHostUsingTypescrpt: boolean + isHostUsingTypescript: boolean ) { const hostMFConfigPath = joinPathFragments( hostProject.root, - isHostUsingTypescrpt + isHostUsingTypescript ? 'module-federation.config.ts' : 'module-federation.config.js' ); @@ -115,7 +107,7 @@ function addRemoteToStaticHost( function addRemoteToDynamicHost( tree: Tree, - options: Schema, + options: AddRemoteOptions, pathToMfManifest: string ) { updateJson(tree, pathToMfManifest, (manifest) => { @@ -129,7 +121,7 @@ function addRemoteToDynamicHost( // TODO(colum): future work: allow dev to pass to path to routing module function addLazyLoadedRouteToHostAppModule( tree: Tree, - options: Schema, + options: AddRemoteOptions, hostFederationType: 'dynamic' | 'static' ) { if (!tsModule) { diff --git a/packages/angular/src/generators/setup-mf/lib/generate-config.ts b/packages/angular/src/generators/setup-mf/lib/generate-config.ts index fb70976446ef0f..4f9a6f518feb15 100644 --- a/packages/angular/src/generators/setup-mf/lib/generate-config.ts +++ b/packages/angular/src/generators/setup-mf/lib/generate-config.ts @@ -33,6 +33,7 @@ export function generateWebpackConfig( { tmpl: '', type: options.mfType, + federationType: options.federationType, name: options.appName, remotes: remotesWithPorts ?? [], projectRoot: appRoot, diff --git a/packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts b/packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts index 0931fb164f3da5..caa38b2d28d940 100644 --- a/packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts +++ b/packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts @@ -14,21 +14,10 @@ export function updateHostAppRoutes(tree: Tree, options: Schema) { const { sourceRoot } = readProjectConfiguration(tree, options.appName); - const remoteRoutes = - options.remotes && Array.isArray(options.remotes) - ? options.remotes.reduce( - (routes, remote) => - `${routes}\n
  • ${ - names(remote).className - }
    • `, - '' - ) - : ''; - tree.write( joinPathFragments(sourceRoot, 'app/app.component.html'), ` ` diff --git a/packages/angular/src/generators/setup-mf/setup-mf.ts b/packages/angular/src/generators/setup-mf/setup-mf.ts index c4ad3cd12f0b41..0ec1e75e47bf81 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.ts @@ -30,7 +30,12 @@ export async function setupMf(tree: Tree, rawOptions: Schema) { let installTask = () => {}; if (options.mfType === 'remote') { - addRemoteToHost(tree, options); + addRemoteToHost(tree, { + appName: options.appName, + host: options.host, + standalone: options.standalone, + port: options.port, + }); addRemoteEntry(tree, options, projectConfig.root); removeDeadCodeFromRemote(tree, options); setupTspathForRemote(tree, options); @@ -54,6 +59,14 @@ export async function setupMf(tree: Tree, rawOptions: Schema) { if (options.mfType === 'host') { setupHostIfDynamic(tree, options); updateHostAppRoutes(tree, options); + for (const remote of options.remotes ?? []) { + addRemoteToHost(tree, { + appName: remote, + host: options.appName, + standalone: options.standalone, + port: options.port, + }); + } installTask = addDependenciesToPackageJson( tree, {},