Bootstrap Angular 18 with Module Federation tools function

Question

I'm trying to start a project with Angular 18 using the "bootstrap" function of the module federations tools: npm page of the module federation tool

This is the way it should be (as it shown in the official examples):

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { bootstrap } from '@angular-architects/module-federation-tools';

bootstrap(AppModule, { //Would like to change this for my standalone AppComponent
  production: environment.production,
  appType: 'shell'
});

As you can see, the 'bootstrap' function receives a module, so my question is: It's there a way to do this with a standalone component instead of a Module? Or should I just make a core module in my Angular 18 application to accommodate the specifications required by the library?

Answer 1

Not sure if @angular-architects/module-federation-tools supports standalone.

But you can find a working example of using standalone component in MFE.

Exposing Router configs w/ Standalone Components (i/o NgModules) via Module Federation

---

If you are ok with Native Federation, you have better examples for standalone components.

main.ts

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

initFederation()
  .catch(err => console.error(err))
  .then(_ => import('./bootstrap'))
  .catch(err => console.error(err));

bootstrap.ts

import { environment } from './environments/environment';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
  ]
});

module-federation-plugin-example - Native Federation