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

// webpack.config.js — configuração do Shell
const 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 produtos
const 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 — Shell
import { 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-frontends
interface 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 inteiro
import { MaterialModule } from './material.module'; // tudo junto

// ✅ Faça assim — só o que o micro-frontend precisa
import { 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 { }