Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation

// webpack.config.js — configuração do Shellconst ModuleFederationPlugin = require("@module-federation/webpack");module.exports = {  plugins: [    new ModuleFederationPlugin({      name: "shell",      remotes: {        // Cada micro-frontend é registrado aqui        "mfe-products": "mfeProducts@http://localhost:4201/remoteEntry.js",        "mfe-orders": "mfeOrders@http://localhost:4202/remoteEntry.js"      },      shared: {        // Dependências que todos compartilham — carregadas uma vez só        "@angular/core": { singleton: true, strictVersion: true },        "@angular/common": { singleton: true, strictVersion: true },        "@angular/router": { singleton: true, strictVersion: true }      }    })  ]};

// webpack.config.js — configuração do micro-frontend de produtosconst ModuleFederationPlugin = require("@module-federation/webpack");module.exports = {  plugins: [    new ModuleFederationPlugin({      name: "mfeProducts",      filename: "remoteEntry.js", // o ponto de entrada que o Shell vai carregar      exposes: {        // O que esse micro-frontend disponibiliza pro mundo        "./ProductsModule": "./src/app/products/products.module.ts"      },      shared: {        "@angular/core": { singleton: true, strictVersion: true },        "@angular/common": { singleton: true, strictVersion: true }      }    })  ]};

// app-routing.module.ts — Shellimport { loadRemoteModule } from '@angular-architects/module-federation';const routes: Routes = [  {    path: 'products',    loadChildren: () => loadRemoteModule({      type: 'module',      remoteEntry: 'http://localhost:4201/remoteEntry.js',      exposedModule: './ProductsModule'    }).then(m => m.ProductsModule)  },  {    path: 'orders',    loadChildren: () => loadRemoteModule({      type: 'module',      remoteEntry: 'http://localhost:4202/remoteEntry.js',      exposedModule: './OrdersModule'    }).then(m => m.OrdersModule)  },  { path: '', redirectTo: '/products', pathMatch: 'full' }];

@Injectable({ providedIn: 'root' })export class DynamicModuleService {  private loadedModules = new Set<string>();  async loadModule(    remoteName: string,    exposedModule: string,    remoteEntry: string  ) {    const moduleKey = `${remoteName}-${exposedModule}`;    if (this.loadedModules.has(moduleKey)) {      return; // já carregou, não busca de novo    }    try {      await loadRemoteModule({ type: 'module', remoteEntry, exposedModule });      this.loadedModules.add(moduleKey);    } catch (error) {      console.error(`Falha ao carregar ${moduleKey}:`, error);      throw error; // deixa o componente de fallback cuidar    }  }}

// Tipos dos eventos — o contrato entre micro-frontendsinterface EventPayloadMap {  'USER_LOGGED_IN': { userId: string; role: string };  'CART_UPDATED': { itemCount: number; total: number };  'NAVIGATION_REQUESTED': { path: string; params?: any };}@Injectable({ providedIn: 'root' })export class MicroFrontendEventBus {  private bus = new Subject<{ type: string; payload: any; source: string }>();  // Publicar evento — type-safe  publish<T extends keyof EventPayloadMap>(    type: T,    payload: EventPayloadMap[T],    source: string  ): void {    this.bus.next({ type, payload, source });  }  // Ouvir evento — type-safe  on<T extends keyof EventPayloadMap>(    eventType: T  ): Observable<EventPayloadMap[T]> {    return this.bus.pipe(      filter(event => event.type === eventType),      map(event => event.payload as EventPayloadMap[T])    );  }}

@Component({  template: `    <div class="error-fallback">      <h3>Este módulo está temporariamente indisponível</h3>      <p>Estamos trabalhando pra restaurar. Tente novamente em alguns minutos.</p>      <button (click)="retry()">Tentar novamente</button>    </div>  `})export class MicroFrontendFallbackComponent {  retry() {    window.location.reload();  }}

@Injectable()export class BoundedContextService {  // Cada micro-frontend mantém seu próprio estado  private localState = new BehaviorSubject(initialState);  // Comunica via eventos, nunca compartilha estado diretamente  notifyDomainEvent(event: DomainEvent): void {    this.eventBus.publish('DOMAIN_EVENT', {      context: this.contextName,      event: event,      timestamp: Date.now()    }, this.contextName);  }}

@Injectable()export class MicroFrontendLifecycleService implements OnDestroy {  private subscriptions = new Map<string, Subscription>();  private loadedComponents = new Map<string, ComponentRef<any>>();  unloadMicroFrontend(name: string): void {    // Destruir componente    const component = this.loadedComponents.get(name);    if (component) {      component.destroy();      this.loadedComponents.delete(name);    }    // Cancelar subscriptions    const sub = this.subscriptions.get(name);    if (sub) {      sub.unsubscribe();      this.subscriptions.delete(name);    }  }  ngOnDestroy(): void {    // Na destruição do serviço, limpa tudo    this.loadedComponents.forEach(c => c.destroy());    this.subscriptions.forEach(s => s.unsubscribe());  }}

// ❌ Evite — importar o Angular Material inteiroimport { MaterialModule } from './material.module'; // tudo junto// ✅ Faça assim — só o que o micro-frontend precisaimport { MatButtonModule } from '@angular/material/button';import { MatCardModule } from '@angular/material/card';import { MatInputModule } from '@angular/material/input';@NgModule({  imports: [MatButtonModule, MatCardModule, MatInputModule]})export class ProductsModule { }

@Injectable()export class SmartPreloadingStrategy implements PreloadingStrategy {  preload(route: Route, load: () => Observable<any>): Observable<any> {    const priority = route.data?.['preload'];    if (priority === 'high') return load(); // sempre pré-carrega    if (priority === 'business-hours') {      const hour = new Date().getHours();      if (hour >= 9 && hour <= 17) return load();    }    return of(null); // carrega só quando o usuário navegar  }}// Nas rotas:const routes: Routes = [  {    path: 'products',    data: { preload: 'high' }, // sempre pré-carrega    loadChildren: () => loadRemoteModule({...})  },  {    path: 'reports',    data: { preload: 'business-hours' }, // só no horário comercial    loadChildren: () => loadRemoteModule({...})  }];

// Migração incremental — rotas legadas e federadas coexistem@NgModule({  imports: [RouterModule.forRoot([    // Rota legada — ainda funciona normalmente    {      path: 'legacy-products',      component: ProductsComponent    },    // Nova rota federada — micro-frontend independente    {      path: 'products',      loadChildren: () => loadRemoteModule({        type: 'module',        remoteEntry: 'http://localhost:4201/remoteEntry.js',        exposedModule: './ProductsModule'      }).then(m => m.ProductsModule)    }  ])]})export class AppRoutingModule { }