Micro-Frontend Architecture with Angular 19 and Nx Monorepos

Introduction

Modern enterprise web applications are becoming large, modular, and complex. A single Angular app can quickly grow into hundreds of components, shared modules, and feature teams. Maintaining such a large codebase becomes challenging as the app scales.

That’s where Micro-Frontend Architecture (MFA) comes in — breaking one large front-end application into smaller, independently deployable apps that can work together seamlessly.

With Angular 19 introducing faster builds, standalone components, and enhanced module federation support, and Nx Monorepos offering workspace management and tooling, this combination is one of the most powerful setups for enterprise-grade Angular applications in 2025.

What is Micro-Frontend Architecture?

Micro-Frontends are the front-end equivalent of microservices.
Instead of one massive Angular app, you build multiple smaller apps (micro frontends), each responsible for a specific feature — like Orders, Inventory, or Reports.

Each of these can:

Be developed and deployed independently
Use its own tech stack or version of Angular
Communicate with others via shared shell apps or module federation

Example
Your ERP system can have:

orders-app → Manages order lifecycle
inventory-app → Handles stock details
reports-app → Shows analytics and KPIs
shell-app → The main container that loads all others dynamically

Why Angular 19 + Nx is Perfect for Micro-Frontends

Angular 19 brings performance and flexibility enhancements:

Standalone APIs (no need for NgModule everywhere)
Enhanced Angular CLI integration with module federation
Signals API for reactive, lightweight state management
Improved lazy loading and zone-less rendering

Nx (by Nrwl) provides:

Monorepo management for multiple Angular projects
Intelligent build caching
Dependency graph visualization
Generators and executors for consistent development

Together, they form a scalable setup for modular enterprise apps.

Architecture Overview

Here’s how it all fits together:

+-------------------------------------------+
|              Shell Application             |
|  (Hosts micro frontends dynamically)       |
+-------------------+-----------------------+
        |                     |
        v                     v
+---------------+     +----------------+
| Orders App    |     | Inventory App  |
| (Standalone)  |     | (Standalone)   |
+---------------+     +----------------+
        |                     |
        v                     v
+-------------------------------------------+
|          Shared Libraries (UI, API)        |
+-------------------------------------------+
        |
        v
+-------------------------------------------+
|            ASP.NET Core Backend API        |
|  (Microservices or Modular APIs)           |
+-------------------------------------------+

Each micro-frontend can have its own Angular app, UI design system, and deploy pipeline, while Nx ensures shared consistency across the workspace.

Step 1: Setting Up Nx Monorepo

Install Nx globally:

npm install -g nx

Create a workspace:

npx create-nx-workspace@latest my-enterprise-app

Choose:

Integrated monorepo
Angular as the framework

This will create a structure like:

apps/
  shell/
  orders/
  inventory/
libs/
  shared/
  ui/

Step 2: Configure Module Federation

Nx provides built-in support for Webpack Module Federation for Angular 19.

In your shell app, configure:

nx g @nx/angular:setup-mf shell --mfType=host --port=4200

For each micro-frontend:

nx g @nx/angular:setup-mf orders --mfType=remote --port=4201
nx g @nx/angular:setup-mf inventory --mfType=remote --port=4202

This automatically updates each project’s webpack.config.js and adds federation plugins.

Example `shell/webpack.config.js`

const { withModuleFederationPlugin } = require('@nx/angular/module-federation');

module.exports = withModuleFederationPlugin({
  remotes: ['orders', 'inventory'],
});

Example `orders/webpack.config.js`

const { withModuleFederationPlugin } = require('@nx/angular/module-federation');

module.exports = withModuleFederationPlugin({
  name: 'orders',
  exposes: {
    './Module': './src/app/orders/orders.module.ts',
  },
});

Step 3: Routing Between Apps

Use lazy loading to dynamically import micro-frontends in shell:

const routes: Routes = [
  {
    path: 'orders',
    loadChildren: () => import('orders/Module').then(m => m.OrdersModule)
  },
  {
    path: 'inventory',
    loadChildren: () => import('inventory/Module').then(m => m.InventoryModule)
  },
  { path: '', redirectTo: 'orders', pathMatch: 'full' }
];

Now, when the user navigates to /orders, the shell loads that micro-frontend dynamically.

Step 4: Sharing UI Components and Utilities

You can create a shared library in Nx for reusable code:

nx g @nx/angular:lib shared-ui

Store reusable modules like:

Buttons, Modals, Tables (UI)
API interceptors
Authentication services

Then, import them into any micro-frontend:

import { SharedUiModule } from '@my-enterprise/shared-ui';

Step 5: Deployment Strategy

Each micro-frontend can be deployed separately — on different servers, containers, or CDNs.

For example:

shell → https://app.company.com/
orders → https://orders.company.com/
inventory → https://inventory.company.com/

When deployed, the shell dynamically loads the remote apps using their remoteEntry.js URLs.

Step 6: Communication Between Micro-Frontends

There are several strategies for inter-app communication:

Shared Services (via RxJS Subjects) — publish/subscribe to global events
Custom Events — dispatch DOM events from one app and listen in another
Global State Library — use Signals or lightweight stores for reactive data
Backend Sync — let ASP.NET Core APIs handle shared state

Example (Shared Service in libs/shared):

@Injectable({ providedIn: 'root' })
export class EventBusService {
  private event$ = new Subject<{ type: string; payload?: any }>();
  emit(event) { this.event$.next(event); }
  on(type: string) { return this.event$.pipe(filter(e => e.type === type)); }
}

Step 7: Monitoring and Versioning

Nx provides tools to analyze dependencies:

nx graph

This generates a visual graph showing how micro-frontends depend on each other.
You can also use nx affected to test or build only the changed projects — improving CI/CD speed dramatically.

Flow Diagram – Angular 19 Micro-Frontend with Nx

                +---------------------------+
                |       Shell App (Host)    |
                |  Angular 19 + Nx + MF     |
                +----------+----------------+
                           |
        ----------------------------------------------
        |                    |                       |
+---------------+   +-----------------+     +----------------+
| Orders App    |   | Inventory App   |     | Reports App    |
| Remote MF App |   | Remote MF App   |     | Remote MF App  |
+---------------+   +-----------------+     +----------------+
        \                    |                     /
         \                   |                    /
          -------------------+--------------------
                           |
                  +-------------------+
                  | Shared Libraries  |
                  | (UI + Services)   |
                  +-------------------+
                           |
                           v
                  +-------------------+
                  | ASP.NET Core API  |
                  | SQL Server / API  |
                  +-------------------+

Advantages of this Architecture

✅ Independent feature deployment
✅ Faster build times with Nx caching
✅ Team-based ownership
✅ Better scalability and modularity
✅ Easier version control and rollback

Real-World Example

A global ERP system could be structured as:

Shell: Navigation + user layout
Micro Frontends: Purchase, Sales, Inventory, Reports
Shared Lib: Authentication, Theme, Common UI

Each department team manages its own app and deploys independently — no central bottlenecks.

Conclusion

Micro-Frontend Architecture with Angular 19 and Nx is a proven way to scale large front-end projects while keeping teams independent and builds efficient.

It brings the microservice mindset to the front-end world — enabling modularity, faster delivery, and easier maintenance.

If your enterprise Angular app is growing large, this is the right time to embrace Nx + Micro-Frontends for a scalable, future-ready solution.