feat(angular): align config file naming for module federation (#9889)

packages/angular/migrations.json

@@ -106,6 +106,12 @@
       "version": "13.9.0-beta.4",
       "description": "Set buildLibsFromSource property to false to not break existing usage.",
       "factory": "./src/migrations/update-13-9-0/set-build-libs-from-source"
+    },
+    "rename-module-federation-config": {
+      "cli": "nx",
+      "version": "14.0.0-beta.1",
+      "description": "Rename mfe.config.js to module-federation.config.js for consistent terminology.",
+      "factory": "./src/migrations/update-14-0-0/rename-mf-config"
     }
   },
   "packageJsonUpdates": {

packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts

@@ -15,14 +15,18 @@ export function moduleFederationDevServer(
 
   const p = workspaceConfig.projects[context.target.project];
 
-  const mfeConfigPath = join(context.workspaceRoot, p.root, 'mfe.config.js');
+  const mfConfigPath = join(
+    context.workspaceRoot,
+    p.root,
+    'module-federation.config.js'
+  );
 
   let mfeConfig: { remotes: string[] };
   try {
-    mfeConfig = require(mfeConfigPath);
+    mfeConfig = require(mfConfigPath);
   } catch {
     throw new Error(
-      `Could not load ${mfeConfigPath}. Was this project generated with "@nrwl/angular:host"?`
+      `Could not load ${mfConfigPath}. Was this project generated with "@nrwl/angular:host"?`
     );
   }
 

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

@@ -2,25 +2,25 @@
 
 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');
-const config = require('./mfe.config');
+const config = require('./module-federation.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');
-const config = require('./mfe.config');
+const config = require('./module-federation.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');
-const config = require('./mfe.config');
+const config = require('./module-federation.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');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;
 

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

@@ -2,18 +2,18 @@
 
 exports[`convertToWithMF should migrate a standard previous generated host config correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);"
 `;
 
 exports[`convertToWithMF should migrate a standard previous generated remote config correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.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');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);"
 `;

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

@@ -2,7 +2,7 @@ import { joinPathFragments, logger, Tree } from '@nrwl/devkit';
 import type { Schema } from './schema';
 
 import { readProjectConfiguration, formatFiles } from '@nrwl/devkit';
-import { getMfeProjects } from '../../utils/get-mfe-projects';
+import { getMFProjects } from '../../utils/get-mf-projects';
 import {
   checkOutputNameMatchesProjectName,
   checkSharedNpmPackagesMatchExpected,
@@ -13,7 +13,7 @@ import {
 } from './lib';
 
 export default async function convertToWithMF(tree: Tree, schema: Schema) {
-  const projects = new Set(getMfeProjects(tree, { legacy: true }));
+  const projects = new Set(getMFProjects(tree, { legacy: true }));
 
   if (!projects.has(schema.project)) {
     throw new Error(
@@ -43,13 +43,16 @@ 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, mfeConfig] = writeNewWebpackConfig(
+  const [updatedWebpackConfig, mfConfig] = writeNewWebpackConfig(
     webpackAst,
     isHostRemoteConfig(webpackAst),
     schema.project
   );
   tree.write(pathToWebpackConfig, updatedWebpackConfig);
-  tree.write(joinPathFragments(project.root, 'mfe.config.js'), mfeConfig);
+  tree.write(
+    joinPathFragments(project.root, 'module-federation.config.js'),
+    mfConfig
+  );
 
   await formatFiles(tree);
 }

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

@@ -3,7 +3,7 @@
 exports[`writeNewWebpackConfig should convert config that is both remote and host correctly 1`] = `
 Array [
   "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);",
   "
     module.exports = {
@@ -19,7 +19,7 @@ Array [
 exports[`writeNewWebpackConfig should convert config that is neither remote and host correctly 1`] = `
 Array [
   "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);",
   "
         module.exports = {
@@ -31,7 +31,7 @@ Array [
 exports[`writeNewWebpackConfig should convert host config correctly 1`] = `
 Array [
   "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);",
   "
         module.exports = {
@@ -44,7 +44,7 @@ Array [
 exports[`writeNewWebpackConfig should convert remote config correctly 1`] = `
 Array [
   "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);",
   "
         module.exports = {

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

@@ -11,7 +11,7 @@ export function writeNewWebpackConfig(
   projectName: string
 ) {
   const webpackConfig = `const { withModuleFederation } = require('@nrwl/angular/module-federation');
-  const config = require('./mfe.config');
+  const config = require('./module-federation.config');
   module.exports = withModuleFederation(config);`;
 
   let mfeConfig = '';

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

@@ -2,18 +2,18 @@
 
 exports[`Host App Generator should generate a host app with a remote 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;
 
 exports[`Host App Generator should generate a host app with a remote 2`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;
 
 exports[`Host App Generator should generate a host app with no remotes 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;

packages/angular/src/generators/host/host.spec.ts

@@ -56,9 +56,9 @@ describe('Host App Generator', () => {
     // ASSERT
     expect(tree.exists('apps/remote1/project.json')).toBeTruthy();
     expect(tree.exists('apps/remote2/project.json')).toBeTruthy();
-    expect(tree.read('apps/host-app/mfe.config.js', 'utf-8')).toContain(
-      `'remote1','remote2'`
-    );
+    expect(
+      tree.read('apps/host-app/module-federation.config.js', 'utf-8')
+    ).toContain(`'remote1','remote2'`);
   });
 
   it('should generate a host, integrate existing remotes and generate any remotes that dont exist', async () => {
@@ -78,8 +78,8 @@ describe('Host App Generator', () => {
     expect(tree.exists('apps/remote1/project.json')).toBeTruthy();
     expect(tree.exists('apps/remote2/project.json')).toBeTruthy();
     expect(tree.exists('apps/remote3/project.json')).toBeTruthy();
-    expect(tree.read('apps/host-app/mfe.config.js', 'utf-8')).toContain(
-      `'remote1','remote2','remote3'`
-    );
+    expect(
+      tree.read('apps/host-app/module-federation.config.js', 'utf-8')
+    ).toContain(`'remote1','remote2','remote3'`);
   });
 });

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

@@ -2,18 +2,18 @@
 
 exports[`MFE Remote App Generator should generate a remote mfe app with a host 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.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');
-const config = require('./mfe.config');
+const config = require('./module-federation.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');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;

packages/angular/src/generators/remote/remote.ts

@@ -2,10 +2,10 @@ import { joinPathFragments, Tree } from '@nrwl/devkit';
 import type { Schema } from './schema';
 import { getProjects, readProjectConfiguration } from '@nrwl/devkit';
 import applicationGenerator from '../application/application';
-import { getMfeProjects } from '../../utils/get-mfe-projects';
+import { getMFProjects } from '../../utils/get-mf-projects';
 
 function findNextAvailablePort(tree: Tree) {
-  const mfeProjects = getMfeProjects(tree);
+  const mfeProjects = getMFProjects(tree);
 
   const ports = new Set<number>([4200]);
   for (const mfeProject of mfeProjects) {

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

@@ -3,7 +3,7 @@
 exports[`Init MFE --federationType=dynamic should create a host with the correct configurations 1`] = `
 "import { setRemoteDefinitions } from '@nrwl/angular/mfe';
 
-  fetch('/assets/mfe.manifest.json')
+  fetch('/assets/module-federation.manifest.json')
   .then((res) => res.json())
   .then(definitions => setRemoteDefinitions(definitions))
   .then(() => import('./bootstrap').catch(err => console.error(err)))"
@@ -83,7 +83,7 @@ export class AppModule { }
 
 exports[`Init MFE should create webpack and mfe configs correctly 1`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;
 
@@ -96,7 +96,7 @@ exports[`Init MFE should create webpack and mfe configs correctly 2`] = `
 
 exports[`Init MFE should create webpack and mfe configs correctly 3`] = `
 "const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);"
 `;
 

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

@@ -1,3 +1,3 @@
 const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation(config);

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

@@ -1,5 +1,5 @@
 const { withModuleFederation } = require('@nrwl/angular/module-federation');
-const config = require('./mfe.config');
+const config = require('./module-federation.config');
 module.exports = withModuleFederation({
     ...config,
     /*

packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts

@@ -24,19 +24,19 @@ export function checkIsCommaNeeded(mfeRemoteText: string) {
 export function addRemoteToHost(tree: Tree, options: Schema) {
   if (options.mfeType === 'remote' && options.host) {
     const hostProject = readProjectConfiguration(tree, options.host);
-    const pathToMfeManifest = joinPathFragments(
+    const pathToMFManifest = joinPathFragments(
       hostProject.sourceRoot,
-      'assets/mfe.manifest.json'
+      'assets/module-federation.manifest.json'
     );
     const hostFederationType = determineHostFederationType(
       tree,
-      pathToMfeManifest
+      pathToMFManifest
     );
 
     if (hostFederationType === 'static') {
       addRemoteToStaticHost(tree, options, hostProject);
     } else if (hostFederationType === 'dynamic') {
-      addRemoteToDynamicHost(tree, options, pathToMfeManifest);
+      addRemoteToDynamicHost(tree, options, pathToMFManifest);
     }
 
     const declarationFilePath = joinPathFragments(
@@ -66,19 +66,19 @@ function addRemoteToStaticHost(
   options: Schema,
   hostProject: ProjectConfiguration
 ) {
-  const hostMfeConfigPath = joinPathFragments(
+  const hostMFConfigPath = joinPathFragments(
     hostProject.root,
-    'mfe.config.js'
+    'module-federation.config.js'
   );
 
-  if (!hostMfeConfigPath || !tree.exists(hostMfeConfigPath)) {
+  if (!hostMFConfigPath || !tree.exists(hostMFConfigPath)) {
     throw new Error(
-      `The selected host application, ${options.host}, does not contain a mfe.config.js or mfe.manifest.json file. Are you sure it has been set up as a host application?`
+      `The selected host application, ${options.host}, does not contain a module-federation.config.js or module-federation.manifest.json file. Are you sure it has been set up as a host application?`
     );
   }
 
-  const hostMFEConfig = tree.read(hostMfeConfigPath, 'utf-8');
-  const webpackAst = tsquery.ast(hostMFEConfig);
+  const hostMFConfig = tree.read(hostMFConfigPath, 'utf-8');
+  const webpackAst = tsquery.ast(hostMFConfig);
   const mfRemotesNode = tsquery(
     webpackAst,
     'Identifier[name=remotes] ~ ArrayLiteralExpression',
@@ -88,11 +88,11 @@ function addRemoteToStaticHost(
   const endOfPropertiesPos = mfRemotesNode.getEnd() - 1;
   const isCommaNeeded = checkIsCommaNeeded(mfRemotesNode.getText());
 
-  const updatedConfig = `${hostMFEConfig.slice(0, endOfPropertiesPos)}${
+  const updatedConfig = `${hostMFConfig.slice(0, endOfPropertiesPos)}${
     isCommaNeeded ? ',' : ''
-  }'${options.appName}',${hostMFEConfig.slice(endOfPropertiesPos)}`;
+  }'${options.appName}',${hostMFConfig.slice(endOfPropertiesPos)}`;
 
-  tree.write(hostMfeConfigPath, updatedConfig);
+  tree.write(hostMFConfigPath, updatedConfig);
 }
 
 function addRemoteToDynamicHost(

packages/angular/src/generators/setup-mfe/lib/fix-bootstrap.ts

@@ -10,17 +10,17 @@ export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) {
 
   const bootstrapImportCode = `import('./bootstrap').catch(err => console.error(err))`;
 
-  const fetchMfeManifestCode = `import { setRemoteDefinitions } from '@nrwl/angular/mfe';
+  const fetchMFManifestCode = `import { setRemoteDefinitions } from '@nrwl/angular/mfe';
 
-  fetch('/assets/mfe.manifest.json')
+  fetch('/assets/module-federation.manifest.json')
   .then((res) => res.json())
   .then(definitions => setRemoteDefinitions(definitions))
   .then(() => ${bootstrapImportCode})`;
 
   tree.write(
     mainFilePath,
     options.mfeType === 'host' && options.federationType === 'dynamic'
-      ? fetchMfeManifestCode
+      ? fetchMFManifestCode
       : bootstrapImportCode
   );
 }

packages/angular/src/generators/setup-mfe/lib/generate-config.ts

@@ -9,7 +9,7 @@ export function generateWebpackConfig(
   remotesWithPorts: { remoteName: string; port: number }[]
 ) {
   if (
-    host.exists(`${appRoot}/mfe.config.js`) ||
+    host.exists(`${appRoot}/module-federation.config.js`) ||
     host.exists(`${appRoot}/webpack.config.js`) ||
     host.exists(`${appRoot}/webpack.prod.config.js`)
   ) {