Creating a Micro-Frontend Shell Application

Demonstrate creating the shell application that will host the micro-frontend modules using Angular's Router and define the routes for loading micro-frontends.

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

// Routes for the micro-frontend shell
const routes: Routes = [
  {
    // Define the route for micro-frontend 1
    path: 'micro-frontend-1',
    loadChildren: () =>
      import('path-to-micro-frontend-1/MicroFrontend1Module').then(
        (m) => m.MicroFrontend1Module
      ),
  },
  {
    // Define the route for micro-frontend 2
    path: 'micro-frontend-2',
    loadChildren: () =>
      import('path-to-micro-frontend-2/MicroFrontend2Module').then(
        (m) => m.MicroFrontend2Module
      ),
  },
  // Additional micro-frontend routes can be added here
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Define the Angular application's routing configuration to load micro-frontend modules based on the route path using lazy loading. Import the RouterModule and NgModule from '@angular/router' and '@angular/core' respectively. Create an array of routes with the `path` that specifies the URL for each micro-frontend and `loadChildren` that dynamically imports the corresponding micro-frontend module. Wrap the routes with the RouterModule.forRoot and export it as AppRoutingModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // Include the AppRoutingModule to enable routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Set up the main AppModule for the micro-frontend shell application. Import BrowserModule, NgModule, our custom AppRoutingModule, and the root AppComponent. Define the AppModule with the @NgModule decorator, declaring the AppComponent and importing BrowserModule and AppRoutingModule to enable app routing. This module bootstraps the application using the root AppComponent.