How to create Micro front-end architecture in Angular?

Creating a micro front-end architecture in Angular involves breaking down a large application into smaller, independent, and reusable modules that can be developed, deployed, and maintained independently. This approach helps in scaling applications and improving maintainability. Here’s a step-by-step guide to creating a micro front-end architecture in Angular:

Step 1: Define the Micro Front-End Strategy

1. Identify Modules: Determine which parts of your application can be split into independent modules or micro front-ends.
2. Communication: Define how these micro front-ends will communicate with each other. Common strategies include shared services, custom events, or a global state management solution.

Step 2: Set Up Multiple Angular Projects

1. Create Main Application: This will be the shell or container application responsible for orchestrating and loading the micro front-ends.
2. Create Micro Front-Ends: Set up multiple Angular applications, each representing a micro front-end. These can be created using Angular CLI.

ng new main-app --routing
ng new micro-app1 --routing
ng new micro-app2 --routing        

Step 3: Configure Angular CLI for Micro Front-Ends

1. Build Output: Adjust the angular.json configuration for each micro front-end to output to a specific directory that the main application can access.

"outputPath": "dist/micro-app1",        

1. Base Href: Ensure each micro front-end is configured with the correct base href.

ng build --base-href /micro-app1/        

Step 4: Serve Micro Front-Ends

1. Deploy Independently: Deploy each micro front-end application independently on different paths or subdomains.

Step 5: Integrate Micro Front-Ends into the Main Application

1. Lazy Loading: Use lazy loading to load the micro front-ends on demand within the main application. This can be done using Angular’s loadChildren.

const routes: Routes = [
  {
    path: 'micro-app1',
    loadChildren: () => import('micro-app1/Module').then(m => m.App1Module)
  },
  {
    path: 'micro-app2',
    loadChildren: () => import('micro-app2/Module').then(m => m.App2Module)
  }
];        

1. Web Components: Alternatively, you can use Angular Elements to package each micro front-end as a web component.

import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

const appElement = createCustomElement(AppComponent, { injector });
customElements.define('micro-app1-element', appElement);        

1. Webpack Module Federation: Utilize Webpack Module Federation for sharing code and dependencies between micro front-ends.

Step 6: Manage Shared State and Communication

1. Shared Services: Create shared services for state management and communication between micro front-ends.
2. Event Bus: Implement an event bus or use Angular’s @Output and @Input decorators for parent-child communication.
3. Global State Management: Use a global state management library like NgRx or Akita to manage shared state across micro front-ends.

Step 7: Optimize and Secure

1. Performance Optimization: Ensure each micro front-end is optimized for performance, using techniques like lazy loading, AOT compilation, and tree shaking.
2. Security: Implement security best practices such as CORS, CSRF protection, and secure data handling.

Example of a Simple Micro Front-End Integration

Here is a simplified example of integrating a micro front-end into the main application:

Main Application Module Configuration:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  {
    path: 'micro-app1',
    loadChildren: () => import('micro-app1/Module').then(m => m.App1Module)
  }
];        

Micro Front-End Module Configuration (micro-app1):

@NgModule({
  declarations: [MicroApp1Component],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: MicroApp1Component }
    ])
  ]
})
export class App1Module { }        

Conclusion

Creating a micro front-end architecture in Angular involves setting up multiple Angular applications, configuring them for independent deployment, and integrating them into a main shell application. This approach helps in building scalable and maintainable applications. Techniques like lazy loading, Webpack Module Federation, and Angular Elements can facilitate this architecture. Additionally, managing shared state and communication effectively is crucial for the seamless operation of micro front-ends.