Native federation can not be added in ESM module

[ZissisT]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

In a new Angular18+ project that has "type": "module" in its package.json, native federation can not be initialized because it uses require() and hardcoded 'federation.config.js' file name for initialization. Exception is thrown, asking to rename .js file to .cjs.

I changed hardcoded file name in libs/native-federation/src/builders/build/builder.ts from 'federation.config.js' to 'federation.config.cjs' and worked like a charm. I can push a PR to check for .cjs first and then for .js, if needed (or even have an optional filename parameter for config file)

Here is a Stackblitz example that throws this exception:
https://stackblitz.com/edit/stackblitz-starters-1ggp6r

Expected behavior

Expected to load with no error. If an Angular lib/app can not be initialized as ESM module due to native federation then what?
We can not change our app's nature, to commonjs just for this, it leads to a chain of changes that make this unusable.

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

"@angular-architects/native-federation": "18.2.2"
Angular CLI: 18.2.10
Node: 20.13.1
OS: linux x64
Browser: Chrome 130.0.6723.70 (Official Build) (64-bit)

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[manfredsteyer]

Good Point. Thanks for this. It seems like the issue only comes up if people add type: "module" to their package.json. I think we need several things here:

• Respect the new file name with .cjs when loading the federation config
• Generating the right filename in the ng add schematic
• Updating the file name in an ng update schematic
• displaying an error message on the cnsole when we see an old federation.config.js

PRs are welcomed. Please link the Pr here.

[ZissisT]

I am working on the PR, will provide link soon, ty

[ZissisT]

@manfredsteyer PR is ready

#687

I tested it but I have a question regarding update:

Regarding the ng update, do you mean a new update schematic? Because I understood that we need to update migration collection and add a new migration.

Thank you

[manfredsteyer]

Awesome. Big thanks. I plan for another release at the End of Nov. I will look into this PR when making this release ready.

[ZissisT]

@manfredsteyer what about the update requirement? I haven't created a new update schematic but added a new migration. Is this correct or should I add a new update schematic that updates the name? Ty

[ms-dosx86]

Any updates?

[Ionaru]

Awaiting the merge & release of ESM support, I've made a small postinstall script to patch @angular-architects/native-federation and renamed federation.config.js to federation.config.cjs

import { readFileSync, writeFileSync } from "node:fs";

/**
 * Patches @angular-architects/native-federation to find our commonjs federation config.
 */

console.log("Starting patch of @angular-architects/native-federation...");

const filePath = "node_modules/@angular-architects/native-federation/src/builders/build/builder.js";
const content = readFileSync(filePath, "utf-8");
const updatedContent = content.replaceAll("federation.config.js", "federation.config.cjs");
writeFileSync(filePath, updatedContent);

console.log("@angular-architects/native-federation patched.");

---

Support for writing federation.config.js in ESM syntax would also be welcome, with another patch to @angular-architects/native-federation that does seem to work in our setup, but I cannot be sure of the implications.

It currently fails here:

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

Line 178 in 3339307

const config = await loadFederationConfig(fedOptions);

Due to the resolved config having a nested default object.

config [Module: null prototype] {
  __esModule: true,
  default: {
    name: 'name-of-project',
    exposes: {
      './name-of-project': './packages/name-of-project/src/bootstrap.ts'
    },
    shared: {},
    sharedMappings: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ],
    skip: { strings: [Set], functions: [], regexps: [Array] },
    externals: [],
    features: { mappingVersion: false }
  }
}

My patch is to replace in builder.js:

const config = yield tslib_1.__await((0, build_5.loadFederationConfig)(fedOptions));

With:

let config = yield tslib_1.__await((0, build_5.loadFederationConfig)(fedOptions));
config = config.default ?? config;

[ZissisT]

@Ionaru I have already submitted a pr #687 - #681 (comment) for this, with the .cjs change included, almost 8 months ago, but no feedback. This issue makes native federation useless to several use cases, so we will probably switch to module federation using webpack to overcome this. Browser builder is something that should not have been removed from native federation in my opinion, I see tons of issues resulting from this one.

[Kwaadpepper]

The status is need work, what work does it need, since the PR has not been reviewed,
will the PR be merged some day ?