08

Module 8: Angular Micro Frontend Project Architecture

Chapter 8 • Intermediate

25 min

Angular Micro Frontend Project Architecture

In this course project, we build:

  • 1 Host Angular app (port 4200)
  • 2 Remote Angular apps (ports 4201, 4202)

Each application:

  • Runs independently
  • Has its own build
  • Has its own deployment lifecycle

Project Structure

Workspace Layout

code
micro-frontends-workspace/
├── host-app/              # Host application (port 4200)
│   ├── src/
│   ├── webpack.config.js
│   └── package.json
├── products-app/           # Products Remote (port 4201)
│   ├── src/
│   ├── webpack.config.js
│   └── package.json
├── checkout-app/           # Checkout Remote (port 4202)
│   ├── src/
│   ├── webpack.config.js
│   └── package.json
└── package.json            # Workspace root

Host Application (Port 4200)

Purpose

  • Application shell
  • Routing orchestration
  • Layout and navigation
  • Entry point for users

Structure

code
host-app/
├── src/
│   ├── app/
│   │   ├── shell/
│   │   │   ├── shell.component.ts
│   │   │   └── shell.component.html
│   │   ├── layout/
│   │   │   ├── header/
│   │   │   ├── footer/
│   │   │   └── sidebar/
│   │   ├── app-routing.module.ts
│   │   └── app.module.ts
│   └── assets/
├── webpack.config.js
└── package.json

Responsibilities

  • ✅ Load remote modules
  • ✅ Handle routing
  • ✅ Provide layout
  • ✅ Manage global state

Products Remote (Port 4201)

Purpose

  • Product catalog
  • Product search
  • Product details
  • Product filters

Structure

code
products-app/
├── src/
│   ├── app/
│   │   ├── products/
│   │   │   ├── products.module.ts
│   │   │   ├── products.component.ts
│   │   │   ├── product-detail/
│   │   │   └── product-list/
│   │   └── app.module.ts
│   └── assets/
├── webpack.config.js
└── package.json

Responsibilities

  • ✅ Product domain logic
  • ✅ Product UI components
  • ✅ Product routing
  • ✅ Expose ProductsModule

Checkout Remote (Port 4202)

Purpose

  • Shopping cart
  • Checkout process
  • Payment integration
  • Order confirmation

Structure

code
checkout-app/
├── src/
│   ├── app/
│   │   ├── checkout/
│   │   │   ├── checkout.module.ts
│   │   │   ├── cart/
│   │   │   ├── payment/
│   │   │   └── confirmation/
│   │   └── app.module.ts
│   └── assets/
├── webpack.config.js
└── package.json

Responsibilities

  • ✅ Checkout domain logic
  • ✅ Checkout UI components
  • ✅ Checkout routing
  • ✅ Expose CheckoutModule

Routing Architecture

Host Routes

typescript.js
const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('products/ProductsModule')
      .then(m => m.ProductsModule)
  },
  {
    path: 'checkout',
    loadChildren: () => import('checkout/CheckoutModule')
      .then(m => m.CheckoutModule)
  },
  {
    path: '',
    redirectTo: '/products',
    pathMatch: 'full'
  }
]

Products Routes

typescript.js
const routes: Routes = [
  { path: '', component: ProductsListComponent },
  { path: ':id', component: ProductDetailComponent }
]

Checkout Routes

typescript.js
const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'payment', component: PaymentComponent },
  { path: 'confirmation', component: ConfirmationComponent }
]

Module Federation Configuration

Host Config

typescript.js
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    products: 'products@http://localhost:4201/remoteEntry.js',
    checkout: 'checkout@http://localhost:4202/remoteEntry.js'
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: true },
    '@angular/common': { singleton: true, strictVersion: true },
    '@angular/router': { singleton: true, strictVersion: true }
  }
})

Products Remote Config

typescript.js
new ModuleFederationPlugin({
  name: 'products',
  filename: 'remoteEntry.js',
  exposes: {
    './ProductsModule': './src/app/products/products.module.ts'
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: true },
    '@angular/common': { singleton: true, strictVersion: true },
    '@angular/router': { singleton: true, strictVersion: true }
  }
})

Checkout Remote Config

typescript.js
new ModuleFederationPlugin({
  name: 'checkout',
  filename: 'remoteEntry.js',
  exposes: {
    './CheckoutModule': './src/app/checkout/checkout.module.ts'
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: true },
    '@angular/common': { singleton: true, strictVersion: true },
    '@angular/router': { singleton: true, strictVersion: true }
  }
})

Development Workflow

Local Development

  1. Start Host: ng serve host-app --port 4200
  2. Start Products: ng serve products-app --port 4201
  3. Start Checkout: ng serve checkout-app --port 4202
  4. Access: http://localhost:4200

Independent Development

  • Products app can run standalone: http://localhost:4201
  • Checkout app can run standalone: http://localhost:4202
  • Test features in isolation

Deployment Architecture

Production URLs

  • Host: https://app.example.com
  • Products: https://products.example.com
  • Checkout: https://checkout.example.com

Independent Deployments

  • Each app has its own CI/CD pipeline
  • Deploy independently
  • No coordination needed
  • Rollback affects only one app

Shared Dependencies

Shared Libraries

  • @angular/core
  • @angular/common
  • @angular/router
  • rxjs

Configuration

  • Singleton: true (one instance)
  • Strict version: true (must match)
  • Prevents duplicate bundles

Communication Patterns

1. Routing

  • Host routes to Remotes
  • URL-based navigation
  • Standard Angular routing

2. Shared Services

  • Event bus for cross-app communication
  • Shared state service
  • Observable-based patterns

3. URL Parameters

  • Pass data via route params
  • Query parameters
  • State in URL

Next Steps

The next modules will guide you through:

  1. Environment setup
  2. Creating Host application
  3. Creating Remote applications
  4. Module Federation configuration
  5. Deployment strategies

Let's start with environment setup!

Previous
Module 7: When NOT to Use Micro Frontend Architecture
Next
Module 9: Angular Module Federation Environment Setup

Related Tutorials