Native Federation - Import module before initFederation (skip list not working)

[Virginia Vila]

Hello,

I'm unable to import a module before initFederation() in my main.ts. Here is the bootstrap function:

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

async function bootstrap() {
  await import('@my-module');

  initFederation({
    'my-micro-mf': 'http://localhost:4201/remoteEntry.js',
  })
    .catch(err => console.error(err))
    .then(() => import('./bootstrap'))
    .then(m => m.bootstrapApp())
    .catch(err => console.error(err));
}

bootstrap();

I need to import @my-module before initFederation, but the browser console shows this error:

zone.js:1049 Error: Unsupported Content-Type "text/html" loading http://localhost:4200/@id/@my-module. 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

Related with this issue that has a similar workaround #464, it may be solved if I import @my-module in the skip list in federation.config.js. I have done that just as @manfredsteyer commented.

const {
 withNativeFederation,
 shareAll,
} = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({
 shared: {
   ...shareAll({
     singleton: true,
     strictVersion: true,
     requiredVersion: 'auto',
   }),
 },
 skip: [
   'rxjs/ajax',
   'rxjs/fetch',
   'rxjs/testing',
   'rxjs/webSocket',
   '@my-module',
   'compression',
   // Add further packages you don't need at runtime
 ],
});

Importing the module in the skip list have changed the error to this:

zone.js:1049 Error: Unsupported Content-Type "text/html" loading http://localhost:4200/@id/@angular/core imported from http://localhost:4200/@fs/Users/my-user/my-workspace/.angular/cache/17.3.5/vite/deps/@my-module.js?v=8c36e771. 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

Now the error seems related to @angular/core. I have checked @my-module peerDependencies and it requires of @angular/core. So what should I do to import this module before initFederation()?

What might be the correct approach?

Thank you in advance.

[Manfred Steyer]

Hi,

I think the reason is that this lib depends on further shared libs (e.g. @angular/core) that cannot be loaded before Federation is initialized.

Best wishes,
Manfred