fix(nf): support adding native federation in ESM application

Author: Zissis Tabouras

libs/native-federation/migration-collection.json

@@ -1,13 +1,19 @@
 {
   "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "name": "native-federation",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "schematics": {
     "update18": {
       "version": "18",
       "factory": "./src/schematics/update18/schematic",
       "schema": "./src/schematics/update18/schema.json",
       "description": "migrating to v18"
+    },
+    "updateConfigExtension": {
+      "version": "18.1",
+      "factory": "./src/schematics/updateConfigExtension/schematic",
+      "schema": "./src/schematics/updateConfigExtension/schema.json",
+      "description": "renaming config file to .cjs"
     }
   }
 }

libs/native-federation/src/builders/build/builder.ts

@@ -311,7 +311,7 @@ function removeBaseHref(req: any, baseHref?: string) {
 
 function infereConfigPath(tsConfig: string): string {
   const relProjectPath = path.dirname(tsConfig);
-  const relConfigPath = path.join(relProjectPath, 'federation.config.js');
+  const relConfigPath = path.join(relProjectPath, 'federation.config.cjs');
 
   return relConfigPath;
 }

libs/native-federation/src/schematics/init/files/federation.config.js__tmpl__ renamed to libs/native-federation/src/schematics/init/files/federation.config.cjs__tmpl__

@@ -25,6 +25,7 @@ import {
 } from '@schematics/angular/utility/dependencies';
 
 import * as path from 'path';
+import * as fs from 'fs';
 
 type NormalizedOptions = {
   polyfills: string;
@@ -38,6 +39,10 @@ type NormalizedOptions = {
   port: number;
 };
 
+const CONFIG_FILE_NAME_PREFIX = 'federation.config';
+const CONFIG_FILE_NAME = `${CONFIG_FILE_NAME_PREFIX}.cjs`;
+const CONFIG_FILE_NAME_JS = `${CONFIG_FILE_NAME_PREFIX}.js`;
+
 export function updatePackageJson(tree: Tree): void {
   const packageJson = tree.readJson('package.json');
 
@@ -91,9 +96,28 @@ export default function config(options: MfSchematicSchema): Rule {
       tree.create(manifestPath, JSON.stringify(remoteMap, null, '\t'));
     }
 
-    const federationConfigPath = path.join(projectRoot, 'federation.config.js');
+    const federationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME);
+    const jsFederationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME_JS);
 
     const exists = tree.exists(federationConfigPath);
+    const jsConfigExists = tree.exists(jsFederationConfigPath);
+
+    if (jsConfigExists) {
+      // If old .js config is found check if new .cjs exists
+      if (!exists) {
+        // .js config is found and no .cjs is found. Inform user to delete old config file so new one is created from scratch
+        // or rename old one to .cjs in order to keep same configuration.
+        throw new Error(
+          `Outdated configuration file found (federation.config.js), please delete it or rename it to .cjs in case you want to keep existing configuration.`
+        );
+      }
+      // Both .js and .cjs configurations are found, delete .js one
+      console.log(
+        'Multiple configuration files found, deleting outdated one (federation.config.js)'
+      );
+      //tree.delete(jsFederationConfigPath); // Doesn't seem to work, will use fs
+      fs.unlinkSync(jsFederationConfigPath);
+    }
 
     const generateRule = !exists
       ? await generateFederationConfig(
@@ -144,6 +168,36 @@ export function patchAngularBuild(tree: Tree) {
   }
 }
 
+export function renameConfigToCjs(options: MfSchematicSchema, tree: Tree) {
+  const workspaceFileName = getWorkspaceFileName(tree);
+  const workspace = JSON.parse(tree.read(workspaceFileName).toString('utf8'));
+
+  const normalized = normalizeOptions(options, workspace, tree);
+
+  const { projectRoot } = normalized;
+
+  const federationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME);
+  const jsFederationConfigPath = path.join(projectRoot, CONFIG_FILE_NAME_JS);
+
+  const exists = tree.exists(federationConfigPath);
+  const jsConfigExists = tree.exists(jsFederationConfigPath);
+
+  if (jsConfigExists) {
+    // If old .js config is found check if new .cjs exists
+    if (!exists) {
+      // .js config is found and no .cjs is found. Rename existing .js to .cjs.
+      tree.rename(jsFederationConfigPath, federationConfigPath);
+      return;
+    }
+    // Both .js and .cjs configurations are found, delete .js one
+    console.log(
+      'Multiple configuration files found, deleting outdated one (federation.config.js)'
+    );
+    //tree.delete(jsFederationConfigPath); // Doesn't seem to work, will use fs
+    fs.unlinkSync(jsFederationConfigPath);
+  }
+}
+
 function updateWorkspaceConfig(
   tree: Tree,
   options: NormalizedOptions,
@@ -298,7 +352,9 @@ function normalizeOptions(
 
   const main =
     projectConfig.architect.build.options.main ||
-    projectConfig.architect.build.options.browser;
+    projectConfig.architect.build.options.browser ||
+    projectConfig.architect.esbuild?.options?.main ||
+    projectConfig.architect.esbuild?.options?.browser;
 
   if (!projectConfig.architect.build.options.polyfills) {
     projectConfig.architect.build.options.polyfills = [];

libs/native-federation/src/schematics/init/schematic.ts

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "mf",
+  "title": "",
+  "type": "object",
+  "properties": {}
+}

libs/native-federation/src/schematics/updateConfigExtension/schema.json

@@ -0,0 +1,11 @@
+import { Rule, Tree } from '@angular-devkit/schematics';
+import { MfSchematicSchema } from '../init/schema';
+import { renameConfigToCjs } from '../init/schematic';
+
+export default function updateConfigExtension(
+  options: MfSchematicSchema
+): Rule {
+  return async function (tree: Tree) {
+    renameConfigToCjs(options, tree);
+  };
+}