[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 #542

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

• 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.

[bb1]

EDIT: Thanks to this comment [...]

The workaround in this issue (initFederation without parameter and then processRemoteInfo) doesn't work for me. It successfully initiates the base app but when I try to load a remote I get the error "Error unknown remote REMOTENAME". So I guess calling processRemoteInfo manually doesn't work anymore.

[manfredsteyer]

This is not supported, unfortunately. You cannot access shared libs before initializing NF.