fix(angular): fix dynamic module federation generation

nrwl · Apr 8, 2024 · 7ff91dc · 7ff91dc
1 parent a9e554f
commit 7ff91dc
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 36 deletions.
diff --git a/...ages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ b/...ages/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__
@@ -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
@@ -6,14 +6,20 @@ 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';
 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
@@ -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
@@ -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<li><a routerLink='${remote}'>${
-              names(remote).className
-            }</a></li>`,
-          ''
-        )
-      : '';
-
   tree.write(
     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>
 `

diff --git 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,
       {},