Native Federation - Error importing module in bootstrap.ts before initFederation

[rpanadero]

Hello,

I'm migrating my application from webpack module federation to native federation and I'm struggled trying to import a module in bootstrap.ts before calling initFederation. I need to do this because my application gets remote urls from a specific source.

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

async function bootstrap() {
  const { initMultiEnvironmentApp } = await import('@my-npm-dependency');
  const { env, envConfig } = await initMultiEnvironmentApp();
  // Move the remote URL to the environment config if you want to use different urls for each environment
  initFederation({
    mfe: envConfig['mfe']
  })
    .catch(err => console.error(err))
    .then(() => import('./bootstrap'))
    .then(m => m.bootstrapApp(env, envConfig))
    .catch(err => console.error(err));
}

bootstrap();

The dev console shows this error:

chunk-AVQVENQ2.js:17 Error: Unsupported Content-Type "text/html" loading http://localhost:4200/@id/@my-dev-dependency. Modules must be served with a valid MIME type like application/javascript.
    at fetchModule (es-module-shims.js:778:13)
    at async es-module-shims.js:823:40

I cannot make developers to configure remote urls in federation.config.json because this would make the deployment harder, they would have to deal with different environment configuration files, etc.

After doing some research I have found out that it is required to call initFederation before calling:

...
  const { initMultiEnvironmentApp } = await import('@my-dev-dependency');
...

As far as I have understood, import maps of shared dependencies are set up on initFederation and this is required for the application to be able to import the dependency.

As a workaround I have done this:

import {
  initFederation as initNativeFederation,
  processRemoteInfo,
} from '@angular-architects/native-federation';

function initFederation(remotes: Record<string, string> = {}) {
  Object.keys(remotes).forEach(remoteName => {
    const url = remotes[remoteName];
    processRemoteInfo(url, remoteName);
  });
}

async function bootstrap() {
  const { initMultiEnvironmentApp } = await import('@my-npm-dependency');
  const { env, envConfig } = await initMultiEnvironmentApp();
  // Move the remote URL to the environment config if you want to use different urls for each environment
  initFederation({
    mfe: envConfig['mfe']
  });
  (await import('./bootstrap')).bootstrapApp(env, envConfig);
}

initNativeFederation().then(() => bootstrap());

In this workaround, I'm calling initFederation first of all to set up shared dependencies and make application be able to resolve imports in bootstrap. Then, in bootstrap, I'm calling my own initFederation method where I register every remote by calling processRemoteInfo. Obviously, this workaround looks bad but I hope this is temporal.

I know that this is not the intended or documented usecase for the library, but webpack module federation solution was working with this and it would be great that native federation would also work.

Thanks before hand!

[manfredsteyer]

If you want to import sth. before calling initFederation, you need to add it to the skip list in your federation.config.js.

[rpanadero]

@manfredsteyer , I don't know what happen but I have the same issue again. With the suggested workaround works well, but not skipping the dependency. Could you try to help me with this?

chunk-AVQVENQ2.js:17 Error: Unsupported Content-Type "text/html" loading http://localhost:4200/@id/@angular/core imported from http://localhost:4200/@fs/Users/rpanadero/work/pf-micro/.angular/cache/17.3.5/vite/deps/@okode_ngx-multienvironment.js?v=b4a10eef. Modules must be served with a valid MIME type like application/javascript.
    at fetchModule (es-module-shims.js:840:13)
    at async es-module-shims.js:881:40

Thanks in advance.