angularwebpack-module-federationangular-module-federationangular18

Bootstrap Angular 18 with Module Federation tools function


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?


Solution

  • 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