From c560c8075ec867a5083e8833de9c1eb460251c65 Mon Sep 17 00:00:00 2001
From: Colum Ferry <cferry09@gmail.com>
Date: Tue, 19 Apr 2022 10:38:16 +0100
Subject: [PATCH] feat(angular): use module-federation-dev-server for hosts
 (#9850)

---
 .../setup-mfe/lib/setup-serve-target.ts       | 37 ++-------------
 .../generators/setup-mfe/setup-mfe.spec.ts    | 45 +++----------------
 2 files changed, 9 insertions(+), 73 deletions(-)

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
index 42b1e4d6021dd..98a66040b2acf 100644
--- a/packages/angular/src/generators/setup-mfe/lib/setup-serve-target.ts
+++ b/packages/angular/src/generators/setup-mfe/lib/setup-serve-target.ts
@@ -11,7 +11,10 @@ export function setupServeTarget(host: Tree, options: Schema) {
 
   appConfig.targets['serve'] = {
     ...appConfig.targets['serve'],
-    executor: '@nrwl/angular:webpack-server',
+    executor:
+      options.mfeType === 'host'
+        ? '@nrwl/angular:module-federation-dev-server'
+        : '@nrwl/angular:webpack-server',
     options: {
       ...appConfig.targets['serve'].options,
       port: options.port ?? undefined,
@@ -19,37 +22,5 @@ export function setupServeTarget(host: Tree, options: Schema) {
     },
   };
 
-  if (options.mfeType === 'host') {
-    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,
-      },
-    };
-  }
   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
index 1941aaf2c7100..d015629332758 100644
--- a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
+++ b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
@@ -114,7 +114,11 @@ describe('Init MFE', () => {
       // ASSERT
       const { build, serve } = readProjectConfiguration(tree, app).targets;
 
-      expect(serve.executor).toEqual('@nrwl/angular:webpack-server');
+      expect(serve.executor).toEqual(
+        type === 'host'
+          ? '@nrwl/angular:module-federation-dev-server'
+          : '@nrwl/angular:webpack-server'
+      );
       expect(build.executor).toEqual('@nrwl/angular:webpack-browser');
       expect(build.options.customWebpackConfig.path).toEqual(
         `apps/${app}/webpack.config.js`
@@ -221,45 +225,6 @@ describe('Init MFE', () => {
     expect(hostAppModule).toMatchSnapshot();
   });
 
-  it('should add a remote application and add it to a specified host applications serve-mfe target', async () => {
-    // ARRANGE
-    await applicationGenerator(tree, {
-      name: 'remote2',
-      routing: true,
-    });
-
-    await setupMfe(tree, {
-      appName: 'app1',
-      mfeType: 'host',
-      routing: true,
-    });
-
-    await setupMfe(tree, {
-      appName: 'remote1',
-      mfeType: 'remote',
-      host: 'app1',
-      port: 4201,
-      routing: true,
-    });
-
-    // ACT
-    await setupMfe(tree, {
-      appName: 'remote2',
-      mfeType: 'remote',
-      host: 'app1',
-      port: 4202,
-      routing: true,
-    });
-
-    // ASSERT
-    const hostAppConfig = readProjectConfiguration(tree, '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');
-  });
-
   it('should modify the associated cypress project to add the workaround correctly', async () => {
     // ARRANGE
     await applicationGenerator(tree, {