feat(angular): add an serve-mfe target to host app (#6444)

Coly010 · web-flow · commit 3e6a3158be12 · 2021-07-21T21:58:56.000Z
diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -27,8 +27,8 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		remote1: 'remote1@http://localhost:4201/remoteEntry.js',
-    		remote2: 'remote2@http://localhost:4202/remoteEntry.js',
+    		\\"remote1\\": 'remote1@http://localhost:4201/remoteEntry.js',
+    		\\"remote2\\": 'remote2@http://localhost:4202/remoteEntry.js',
       
       },
       shared: {
@@ -72,7 +72,7 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		remote1: 'remote1@http://localhost:4200/remoteEntry.js',
+    		\\"remote1\\": 'remote1@http://localhost:4200/remoteEntry.js',
       
       },
       shared: {
diff --git a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Init MFE should add a remote application and add it to a specified host applications router config 1`] = `
+"import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([{
+         path: 'remote1', 
+         loadChildren: () => import('remote1/Module').then(m => m.RemoteEntryModule)
+     }, {
+         path: 'remote2', 
+         loadChildren: () => import('remote2/Module').then(m => m.RemoteEntryModule)
+     }], {initialNavigation: 'enabledBlocking'})
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+"
+`;
+
 exports[`Init MFE should add a remote application and add it to a specified host applications webpack config that contains a remote application already 1`] = `
 "const ModuleFederationPlugin = require(\\"webpack/lib/container/ModuleFederationPlugin\\");
 const mf = require(\\"@angular-architects/module-federation/webpack\\");
@@ -27,8 +55,8 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		remote1: 'remote1@http://localhost:4201/remoteEntry.js',
-    		remote2: 'remote2@http://localhost:4202/remoteEntry.js',
+    		\\"remote1\\": 'remote1@http://localhost:4201/remoteEntry.js',
+    		\\"remote2\\": 'remote2@http://localhost:4202/remoteEntry.js',
       
       },
       shared: {
@@ -72,7 +100,7 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		remote1: 'remote1@http://localhost:4200/remoteEntry.js',
+    		\\"remote1\\": 'remote1@http://localhost:4200/remoteEntry.js',
       
       },
       shared: {
diff --git a/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts b/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts
@@ -4,6 +4,9 @@ import type { Schema } from '../schema';
 import { readProjectConfiguration, joinPathFragments } from '@nrwl/devkit';
 import { tsquery } from '@phenomnomnominal/tsquery';
 import { ObjectLiteralExpression } from 'typescript';
+import { addRoute } from '../../../utils/nx-devkit/ast-utils';
+
+import * as ts from 'typescript';
 
 export function addRemoteToHost(host: Tree, options: Schema) {
   if (options.mfeType === 'remote' && options.host) {
@@ -28,7 +31,7 @@ export function addRemoteToHost(host: Tree, options: Schema) {
     const endOfPropertiesPos = mfRemotesNode.properties.end;
 
     const updatedConfig = `${hostWebpackConfig.slice(0, endOfPropertiesPos)}
-    \t\t${options.appName}: '${options.appName}@http://localhost:${
+    \t\t"${options.appName}": '${options.appName}@http://localhost:${
       options.port ?? 4200
     }/remoteEntry.js',${hostWebpackConfig.slice(endOfPropertiesPos)}`;
 
@@ -44,5 +47,38 @@ export function addRemoteToHost(host: Tree, options: Schema) {
         ? host.read(declarationFilePath, 'utf-8')
         : '') + `\ndeclare module '${options.appName}/Module';`;
     host.write(declarationFilePath, declarationFileContent);
+
+    addLazyLoadedRouteToHostAppModule(host, options);
+  }
+}
+
+// TODO(colum): future work: allow dev to pass to path to routing module
+function addLazyLoadedRouteToHostAppModule(host: Tree, options: Schema) {
+  const hostAppConfig = readProjectConfiguration(host, options.host);
+  const pathToHostAppModule = `${hostAppConfig.sourceRoot}/app/app.module.ts`;
+  if (!host.exists(pathToHostAppModule)) {
+    return;
   }
+
+  const hostAppModule = host.read(pathToHostAppModule, 'utf-8');
+  if (!hostAppModule.includes('RouterModule.forRoot(')) {
+    return;
+  }
+
+  let sourceFile = ts.createSourceFile(
+    pathToHostAppModule,
+    hostAppModule,
+    ts.ScriptTarget.Latest,
+    true
+  );
+
+  sourceFile = addRoute(
+    host,
+    pathToHostAppModule,
+    sourceFile,
+    `{
+         path: '${options.appName}', 
+         loadChildren: () => import('${options.appName}/Module').then(m => m.RemoteEntryModule)
+     }`
+  );
 }
diff --git a/packages/angular/src/generators/setup-mfe/lib/setup-serve-target.ts b/packages/angular/src/generators/setup-mfe/lib/setup-serve-target.ts
@@ -12,15 +12,43 @@ export function setupServeTarget(host: Tree, options: Schema) {
   appConfig.targets['serve'] = {
     ...appConfig.targets['serve'],
     executor: '@nrwl/angular:webpack-server',
+    options: {
+      ...appConfig.targets['serve'].options,
+      port: options.port ?? undefined,
+    },
   };
 
   if (options.mfeType === 'host') {
-    appConfig.targets['mfe-serve'] = {
+    const remoteServeCommands = options.remotes
+      ? options.remotes.map((r) => `nx serve ${r}`)
+      : undefined;
+    const commands = remoteServeCommands
+      ? [...remoteServeCommands, `nx serve ${options.appName}`]
+      : [`nx serve ${options.appName}`];
+
+    appConfig.targets['serve-mfe'] = {
       executor: '@nrwl/workspace:run-commands',
       options: {
-        commands: [`nx serve ${options.appName}"`],
+        commands,
       },
     };
   }
   updateProjectConfiguration(host, options.appName, appConfig);
+
+  if (options.mfeType === 'remote' && options.host) {
+    const hostAppConfig = readProjectConfiguration(host, options.host);
+
+    hostAppConfig.targets['serve-mfe'] = {
+      ...hostAppConfig.targets['serve-mfe'],
+      options: {
+        ...hostAppConfig.targets['serve-mfe'].options,
+        commands: [
+          `nx serve ${options.appName}`,
+          ...hostAppConfig.targets['serve-mfe'].options.commands,
+        ],
+      },
+    };
+
+    updateProjectConfiguration(host, options.host, hostAppConfig);
+  }
 }
diff --git a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
@@ -11,9 +11,11 @@ describe('Init MFE', () => {
     host = createTreeWithEmptyWorkspace();
     await applicationGenerator(host, {
       name: 'app1',
+      routing: true,
     });
     await applicationGenerator(host, {
       name: 'remote1',
+      routing: true,
     });
   });
 
@@ -215,4 +217,78 @@ describe('Init MFE', () => {
     const hostWebpackConfig = host.read('apps/app1/webpack.config.js', 'utf-8');
     expect(hostWebpackConfig).toMatchSnapshot();
   });
+
+  it('should add a remote application and add it to a specified host applications router config', async () => {
+    // ARRANGE
+    await applicationGenerator(host, {
+      name: 'remote2',
+      routing: true,
+    });
+
+    await setupMfe(host, {
+      appName: 'app1',
+      mfeType: 'host',
+      routing: true,
+    });
+
+    await setupMfe(host, {
+      appName: 'remote1',
+      mfeType: 'remote',
+      host: 'app1',
+      port: 4201,
+      routing: true,
+    });
+
+    // ACT
+    await setupMfe(host, {
+      appName: 'remote2',
+      mfeType: 'remote',
+      host: 'app1',
+      port: 4202,
+      routing: true,
+    });
+
+    // ASSERT
+    const hostAppModule = host.read('apps/app1/src/app/app.module.ts', 'utf-8');
+    expect(hostAppModule).toMatchSnapshot();
+  });
+
+  it('should add a remote application and add it to a specified host applications serve-mfe target', async () => {
+    // ARRANGE
+    await applicationGenerator(host, {
+      name: 'remote2',
+      routing: true,
+    });
+
+    await setupMfe(host, {
+      appName: 'app1',
+      mfeType: 'host',
+      routing: true,
+    });
+
+    await setupMfe(host, {
+      appName: 'remote1',
+      mfeType: 'remote',
+      host: 'app1',
+      port: 4201,
+      routing: true,
+    });
+
+    // ACT
+    await setupMfe(host, {
+      appName: 'remote2',
+      mfeType: 'remote',
+      host: 'app1',
+      port: 4202,
+      routing: true,
+    });
+
+    // ASSERT
+    const hostAppConfig = readProjectConfiguration(host, 'app1');
+    const serveMfe = hostAppConfig.targets['serve-mfe'];
+
+    expect(serveMfe.options.commands).toContain('nx serve remote1');
+    expect(serveMfe.options.commands).toContain('nx serve remote2');
+    expect(serveMfe.options.commands).toContain('nx serve app1');
+  });
 });
