feat(angular): use a mfe.config.js for mfe (#9495)

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -2,36 +2,26 @@
 
 exports[`app --mfe should add a remote application and add it to a specified host applications webpack config that contains a remote application already 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'app1',
-  remotes: ['remote1','remote2',]
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`app --mfe should add a remote application and add it to a specified host applications webpack config when no other remote has been added to it 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'app1',
-  remotes: ['remote1',]
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`app --mfe should generate a Module Federation correctly for a each app 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'my-app',
-  remotes: []
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`app --mfe should generate a Module Federation correctly for a each app 2`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'my-app',
-  exposes: {
-    './Module': 'apps/my-app/src/app/remote-entry/entry.module.ts',
-  },
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`app at the root should accept numbers in the path 1`] = `"src/9-websites/my-app"`;

packages/angular/src/generators/convert-to-with-mf/__snapshots__/convert-to-with-mf.spec.ts.snap

@@ -2,28 +2,18 @@
 
 exports[`convertToWithMF should migrate a standard previous generated host config correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
-          name: 'host1',
-          remotes: [['remote1', 'http://localhost:4201']],
-        });"
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);"
 `;
 
 exports[`convertToWithMF should migrate a standard previous generated remote config correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
-          name: 'remote1',
-          exposes: {
-        './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts',
-      },
-        });"
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);"
 `;
 
 exports[`convertToWithMF should migrate a standard previous generated remote config using object shared syntax correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
-          name: 'remote1',
-          exposes: {
-        './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts',
-      },
-        });"
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);"
 `;

packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts

@@ -1,4 +1,4 @@
-import { logger, Tree } from '@nrwl/devkit';
+import { joinPathFragments, logger, Tree } from '@nrwl/devkit';
 import type { Schema } from './schema';
 
 import { readProjectConfiguration, formatFiles } from '@nrwl/devkit';
@@ -43,12 +43,13 @@ export default async function convertToWithMF(tree: Tree, schema: Schema) {
     `This Micro Frontend configuration conversion will overwrite "${schema.project}"'s current webpack config. If you have anything custom that is not related to Micro Frontends, it will be lost. You should be able to see the changes in your version control system.`
   );
 
-  const updatedWebpackConfig = writeNewWebpackConfig(
+  const [updatedWebpackConfig, mfeConfig] = writeNewWebpackConfig(
     webpackAst,
     isHostRemoteConfig(webpackAst),
     schema.project
   );
   tree.write(pathToWebpackConfig, updatedWebpackConfig);
+  tree.write(joinPathFragments(project.root, 'mfe.config.js'), mfeConfig);
 
   await formatFiles(tree);
 }

packages/angular/src/generators/convert-to-with-mf/lib/__snapshots__/write-new-webpack-config.spec.ts.snap

@@ -1,37 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`writeNewWebpackConfig should convert config that is both remote and host correctly 1`] = `
-"const { withModuleFederation } = require('@nrwl/angular/module-federation');
-    module.exports = withModuleFederation({
+Array [
+  "const { withModuleFederation } = require('@nrwl/angular/module-federation');
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);",
+  "
+    module.exports = {
       name: 'both1',
       remotes: [['remote1', 'http://localhost:4201']],
       exposes: {
                     './Module': 'apps/both/src/app/remote-entry/entry.module.ts'
                 },
-    });"
+    };",
+]
 `;
 
 exports[`writeNewWebpackConfig should convert config that is neither remote and host correctly 1`] = `
-"const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
+Array [
+  "const { withModuleFederation } = require('@nrwl/angular/module-federation');
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);",
+  "
+        module.exports = {
           name: 'neither',
-        });"
+        };",
+]
 `;
 
 exports[`writeNewWebpackConfig should convert host config correctly 1`] = `
-"const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
+Array [
+  "const { withModuleFederation } = require('@nrwl/angular/module-federation');
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);",
+  "
+        module.exports = {
           name: 'host1',
           remotes: [['remote1', 'http://localhost:4201']],
-        });"
+        };",
+]
 `;
 
 exports[`writeNewWebpackConfig should convert remote config correctly 1`] = `
-"const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
+Array [
+  "const { withModuleFederation } = require('@nrwl/angular/module-federation');
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);",
+  "
+        module.exports = {
           name: 'remote1',
           exposes: {
                     './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts'
                 },
-        });"
+        };",
+]
 `;

packages/angular/src/generators/convert-to-with-mf/lib/write-new-webpack-config.ts

@@ -10,38 +10,42 @@ export function writeNewWebpackConfig(
   mfType: IsHostRemoteConfigResult,
   projectName: string
 ) {
-  let webpackConfig = '';
+  const webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation');
+  const config = require('./mfe.config');
+  module.exports = withModuleFederation(config);`;
+
+  let mfeConfig = '';
   if (!mfType) {
-    webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
+    mfeConfig = `
+        module.exports = {
           name: '${projectName}',
-        });`;
+        };`;
   } else if (mfType === 'host') {
     const remotes = hostRemotesToString(ast);
-    webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
+    mfeConfig = `
+        module.exports = {
           name: '${projectName}',
           remotes: ${remotes},
-        });`;
+        };`;
   } else if (mfType === 'remote') {
     const exposedModules = getExposedModulesFromRemote(ast);
-    webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation');
-        module.exports = withModuleFederation({
+    mfeConfig = `
+        module.exports = {
           name: '${projectName}',
           exposes: ${exposedModules},
-        });`;
+        };`;
   } else if (mfType === 'both') {
     const remotes = hostRemotesToString(ast);
     const exposedModules = getExposedModulesFromRemote(ast);
-    webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation');
-    module.exports = withModuleFederation({
+    mfeConfig = `
+    module.exports = {
       name: '${projectName}',
       remotes: ${remotes},
       exposes: ${exposedModules},
-    });`;
+    };`;
   }
 
-  return webpackConfig;
+  return [webpackConfig, mfeConfig];
 }
 
 function hostRemotesToString(ast: SourceFile) {

packages/angular/src/generators/mfe-host/__snapshots__/mfe-host.spec.ts.snap

@@ -2,26 +2,18 @@
 
 exports[`MFE Host App Generator should generate a host mfe app with a remote 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'remote',
-  exposes: {
-    './Module': 'apps/remote/src/app/remote-entry/entry.module.ts',
-  },
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`MFE Host App Generator should generate a host mfe app with a remote 2`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'test',
-  remotes: ['remote',]
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`MFE Host App Generator should generate a host mfe app with no remotes 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'test',
-  remotes: []
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;

packages/angular/src/generators/mfe-remote/__snapshots__/mfe-remote.spec.ts.snap

@@ -2,28 +2,18 @@
 
 exports[`MFE Remote App Generator should generate a remote mfe app with a host 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'host',
-  remotes: ['test',]
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`MFE Remote App Generator should generate a remote mfe app with a host 2`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'test',
-  exposes: {
-    './Module': 'apps/test/src/app/remote-entry/entry.module.ts',
-  },
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;
 
 exports[`MFE Remote App Generator should generate a remote mfe app with no host 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: 'test',
-  exposes: {
-    './Module': 'apps/test/src/app/remote-entry/entry.module.ts',
-  },
-});"
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
 `;

packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap

@@ -31,35 +31,43 @@ 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 { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
+"module.exports = {
   name: 'app1',
   remotes: ['remote1','remote2',]
-});"
+}"
 `;
 
 exports[`Init MFE should add a remote application and add it to a specified host applications webpack config when no other remote has been added to it 1`] = `
-"const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
+"module.exports = {
   name: 'app1',
   remotes: ['remote1',]
-});"
+}"
 `;
 
-exports[`Init MFE should create webpack configs correctly 1`] = `
+exports[`Init MFE should create webpack and mfe configs correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
+`;
+
+exports[`Init MFE should create webpack and mfe configs correctly 2`] = `
+"module.exports = {
   name: 'app1',
   remotes: []
-});"
+}"
 `;
 
-exports[`Init MFE should create webpack configs correctly 2`] = `
+exports[`Init MFE should create webpack and mfe configs correctly 3`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);"
+`;
+
+exports[`Init MFE should create webpack and mfe configs correctly 4`] = `
+"module.exports = {
   name: 'remote1',
   exposes: {
     './Module': 'apps/remote1/src/app/remote-entry/entry.module.ts',
   },
-});"
+}"
 `;

packages/angular/src/generators/setup-mfe/files/webpack/mfe.config.js__tmpl__

@@ -0,0 +1,7 @@
+module.exports = {
+  name: '<%= name %>',<% if(type === 'host') { %>
+  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
+  exposes: {
+    './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',
+  },<% } %>
+}

packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__

@@ -1,8 +1,3 @@
 const { withModuleFederation } = require('@nrwl/angular/module-federation');
-module.exports = withModuleFederation({
-  name: '<%= name %>',<% if(type === 'host') { %>
-  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
-  exposes: {
-    './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',
-  },<% } %>
-});
+const config = require('./mfe.config');
+module.exports = withModuleFederation(config);