Angular 17 Micro Frontend Demo

Implementing micro frontends with Angular 17 involves creating multiple, independently deployable frontend applications (micro frontends) that can be composed into a larger application. Each micro frontend can be developed, tested, and deployed independently, allowing for greater flexibility and scalability in large projects.

The basic strategy to achieve this with Angular involves:

1. Creating separate Angular projects for each micro frontend.
2. Using a container application to load and display these micro frontends.
3. Communicating between micro frontends and the container app, if necessary.

Below is a simplified code example to demonstrate how you might set up a basic micro frontend architecture using Angular 17. This example assumes you have basic knowledge of Angular and its CLI.

Step 1: Create the Container Application

First, you’ll create the container application which will act as the host for the micro frontends.

ng new container-app --routing=true --style=scss

In the container app, you might use Angular’s Router to dynamically load micro frontends based on the route.

Step 2: Create Micro Frontend Applications

Create separate Angular projects for each micro frontend. For example:

ng new micro-frontend-1 --routing=true --style=scss
ng new micro-frontend-2 --routing=true --style=scss

Step 3: Build and Serve Micro Frontends

You’ll need to build each micro frontend and serve it, possibly from a distinct base URL. For simplification, we’ll assume static deployment.

ng build --prod --output-hashing=none

You might serve these builds from different paths on a web server, or use Angular’s development server for testing.

Step 4: Load Micro Frontends in the Container App

In the container app, you can dynamically load micro frontends using iframes, Web Components, or JavaScript. A simple approach is to dynamically set the src of an iframe based on the route.

Container App app.component.html example:

<iframe [src]="microFrontendUrl" frameborder="0"></iframe>

Container App app.component.ts example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  microFrontendUrl: string;

  constructor() {
    this.microFrontendUrl = this.getMicroFrontendUrl(window.location.pathname);
  }

  getMicroFrontendUrl(path: string): string {
    switch (path) {
      case '/micro-frontend-1':
        return 'http://localhost:4201'; // URL where micro-frontend-1 is served
      case '/micro-frontend-2':
        return 'http://localhost:4202'; // URL where micro-frontend-2 is served
      default:
        return '';
    }
  }
}

Step 5: Communicating Between Micro Frontends and the Container

Communication between the container and micro frontends can be achieved through various mechanisms, such as Custom Events, Shared Libraries, or even leveraging the Angular framework itself if you embed micro frontends more natively.

Note:

This is a simplified explanation and code example to get you started with micro frontends in Angular. Depending on your requirements, you might need to explore more sophisticated approaches, such as using Module Federation with Webpack (available from Angular 11 onwards), which allows for more dynamic loading of micro frontends without iframes and can share dependencies between them.