Source: Dev.to

Welcome!

In this guide, we’ll walk through how to set up an Angular 21 application using a micro‑frontend architecture. We’ll be using the awesome Angular Architects’ Native Federation package to make this happen.

What are Micro Frontends?

Think of micro frontends like building with LEGO. Instead of one giant, heavy block, you build several smaller, independent pieces (the “micro” parts) that fit together to make one big application (the “frontend”). This makes it much easier for different teams to work on different parts of the app without stepping on each other’s toes.

Native Federation uses features already built into modern browsers (native module federation) to handle this, which makes it fast and future‑proof!

Prerequisites

Before we dive in, make sure your toolbox is ready. You’ll need:

• Node Version Manager (nvm) – a switcher for different Node.js versions. Handy if you work on multiple projects.
• Node.js and npm – the latest LTS version that’s compatible with Angular 21.
• Angular CLI – our command‑line buddy that helps generate code and run the app.

To install the Angular CLI, run:

npm i -g @angular/cli

Step 1: Set up Your Workspace (Monorepo)

Create a workspace (a “monorepo”) that will hold many related projects. Use the --create-application=false flag to start with a clean slate.

ng new mfe-spa --create-application=false
cd mfe-spa

Step 2: Create Your Applications

The Host Application (The Shell)

The host is the “frame” that ties everything together. It’s the main app users load first.

ng g application host

The Remote Application (The Micro Frontend)

The remote app is a specific piece of functionality (e.g., a profile page or dashboard) that will live inside the host. Feel free to name it whatever you like.

ng g application my-remote-app

(Replace my-remote-app with your own name if you prefer.)

Step 3: Add Native Federation

Install the package that enables sharing components and modules between apps.

npm install @angular-architects/native-federation -D

Step 4: Give Your Apps a Micro‑Frontend Boost!

Run an initialization command for each app to prepare them for communication.

Preparing the Host

ng g @angular-architects/native-federation:init --project host --type host --port 4200

• What this does: Configures the host as the “shell” (consumer) and sets it to run on the standard development port 4200.

Preparing the Remote

ng g @angular-architects/native-federation:init --project my-remote-app --type remote --port 4201

• What this does: Configures the remote as a “provider” (something the host can borrow) and sets it to run on port 4201 so the two apps don’t clash.

Configuration Magic (Post‑Initialization)

Now tell each app what it’s sharing and what it’s receiving.

1. In the Remote App – Choose What to Share

Edit projects/my-remote-app/module-federation.config.ts to expose components or modules.

// projects/my-remote-app/module-federation.config.ts
export default {
  name: 'myRemoteApp',
  exposes: {
    // The host will import this as './Component'
    './Component':
      './projects/my-remote-app/src/app/my-remote-component/my-remote-component.component.ts',
  },
};

2. In the Host App – Find Your Remotes

Edit projects/host/module-federation.config.ts to point to the remote’s entry file.

// projects/host/module-federation.config.ts
export default {
  name: 'host',
  remotes: [
    {
      // Must match the name defined in the remote’s config
      name: 'myRemoteApp',
      url: 'http://localhost:4201/remoteEntry.json',
    },
  ],
};

3. Loading the Remote Dynamically

Use loadRemoteModule in the host’s routing configuration to load the remote component only when needed.

// projects/host/src/app/app.routes.ts
export const routes: Routes = [
  {
    path: 'my-feature',
    loadComponent: () =>
      loadRemoteModule('myRemoteApp', './Component')
        .then((m) => m.MyRemoteComponentComponent),
  },
];

Conclusion: You Did It!

Congratulations! You’ve just set up a modern, scalable micro‑frontend architecture using Angular 21 and Native Federation. 🎉

Angular 21 and Native Federation

This foundation makes it easy to keep your projects organized as they grow and helps you stay on the cutting edge of web development.

Happy coding!