[Native Federation] Import module before initFederation calls the wrong URL

[bb1]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

Hi,

it's impossible to import any module before initFederation() in the main.ts. Here is the code:

import { initFederation } from '@angular-architects/native-federation';
import { somethingFromLib } from '@org/lib';

somethingFromLib.then((remotes) => {
  initFederation(
    'my-micro-mf': 'http://remotePath/remoteEntry.js',
  )
    .catch(err => console.error(err))
    .then(() => import('./bootstrap'))
    .catch(err => console.error(err));
});

This creates the following error:

es-module-shims.js:854 Uncaught Error: Unsupported Content-Type "text/html" loading http://localhost:4200/@id/@org/lib imported from http://localhost:4200/chunk-JLZ3745L.js. Modules must be served with a valid MIME type like application/javascript.
    at fetchModule (es-module-shims.js:854:13)
    at async es-module-shims.js:895:40

After reading #542 I thought this was caused by the angular dependency inside the lib. But since then I removed all dependencies form the lib and still have the same issue. I notices that the browser tries to load a wrong URL when using ng serve:

It tries to load this: http://localhost:4200/@id/@org/lib But the correct URL is: http://localhost:4200/_org_lib-0_0_3-dev.js

So for some reason a different module resolution is used. Any idea why and how to solve this?

Expected behavior

I should be able to use imports inside the main.ts

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

"@angular/core": "17.3.10", "@angular-architects/native-federation": "17.1.8" node -v v22.10.0 Ubuntu 24.04.1 LTS (WSL)

Other information

This is very much related to https://github.com/angular-architects/module-federation-plugin/issues/542

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

• [X] Yes
• [ ] No

[bb1]

Oh and this works with any import. I could reproduce it with just importing rxjs:

import { initFederation } from '@angular-architects/native-federation';
import { Observable } from 'rxjs';
console.log(Observable);

initFederation(
  'micro-fe': 'http://path/to/fe/remoteEntry.json'
)
  .catch(err => console.error(err))
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

This still crashed with the same error:

es-module-shims.js:854 Uncaught Error: Unsupported Content-Type "text/html" loading http://localhost:4200/@id/rxjs imported from http://localhost:4200/main.js. Modules must be served with a valid MIME type like application/javascript.
    at fetchModule (es-module-shims.js:854:13)
    at async es-module-shims.js:895:40

I took a look at the generated main.js file and it appears that the import is wrong in there. So I guess the error is inside the builder?

// src/main.ts
import { Observable } from "/@id/rxjs"; // <--- what is this?
var require_main = __commonJS({
  "src/main.ts"(exports) {
    console.log(Observable);
    Environment.load().then((env) => __async(exports, null, function* () {
      import("/bootstrap-UZVMGLVW.js");
    }));
  }
});
export default require_main();

[Turom]

I have the exact same issue, my import paths that are usually resolved and transformed in other files according to the paths in compilerOptions are not transformed in main.ts while building, also looking for a solution.

EDIT: Thanks to this comment I found that adding my lib to the skiplist included it in the main chunk and it works. It's fine because it's a small utility lib but that will do for now as a workaround

[bb1]

EDIT: Thanks to this comment I found that adding my lib to the skiplist included it in the main chunk and it works. It's fine because it's a small utility lib but that will do for now as a workaround

Sadly this isn't really an option for me. Because I use a base-class from there to communicate between my microfrontends.

I'm pretty sure the reason for this is that the import inside main.ts are not passed through this function: https://github.com/angular-architects/module-federation-plugin/blob/main/libs/native-federation-esbuild/src/lib/adapter.ts#L173 In fact in the final bundle they are not touched at all.