DEV Community

Guillermo Mejia
Guillermo Mejia

Posted on

From Zero to Monorepo: Angular v21 MFE with Native Federation

#webdev #angular #beginners #tutorial

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, let's make sure your toolbox is ready. You'll need:

  • Node Version Manager (nvm): This is like a switcher for different Node.js versions. It's super helpful if you work on multiple projects!
  • Node.js and npm: You'll need the latest LTS (Long Term Support) version that's compatible with Angular 21.
  • Angular CLI: This is our command-line buddy that helps us generate code and run our app.

To install the Angular CLI, just run this command in your terminal:

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Step 1: Set up Your Workspace (Monorepo)

First, let's create a special workspace called a "monorepo." A monorepo is just a fancy way of saying "a folder that holds many related projects."

We'll use a special flag, --create-application=false, which creates a clean slate without an initial app, so we can carefully add our own later.

ng new mfe-spa --create-application=false
cd mfe-spa
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Your Applications

Now, inside our workspace, we'll create two main types of apps: the Shell (Host) and the Micro Frontend (Remote).

The Host Application (The Shell)

Think of the host as the "frame" or "shell" that ties everything together. It's the main app that users load first.

ng g application host
Enter fullscreen mode Exit fullscreen mode

The Remote Application (The Micro Frontend)

The remote application is the specific piece of functionality (like a profile page or a dashboard) that will live within the host. You can call it whatever you like!

ng g application my-remote-app
Enter fullscreen mode Exit fullscreen mode

(Feel free to replace my-remote-app with your own name!)

Step 3: Add Native Federation

Now, let's install the magic that makes it all possible! This package will help us share components and modules between apps.

npm install @angular-architects/native-federation -D
Enter fullscreen mode Exit fullscreen mode

Step 4: Give Your Apps a Micro Frontend Boost!

Now, we need to run a special "initialization" command for each of our apps. This will prepare them to talk to each other.

Preparing the Host

Run this command to tell our host app that it will be looking for micro frontends.

ng g @angular-architects/native-federation:init --project host --type host --port 4200
Enter fullscreen mode Exit fullscreen mode
  • What this does: It configures the host as the "shell" (the consumer) and sets it to run on the standard development port (4200).

Preparing the Remote

Now we'll do something similar for our remote app (replace my-remote-app with the name you chose).

ng g @angular-architects/native-federation:init --project my-remote-app --type remote --port 4201
Enter fullscreen mode Exit fullscreen mode
  • What this does: It configures our remote app to be a "provider" (something the host can borrow) and sets it to run on a different port (4201) so they don't fight over the same port!

Configuration Magic (Post-Initialization)

Now that we've set up the foundations, we just need to tell each app what it's sharing and what it's receiving!

1. In the Remote App: Choose What to Share

In your remote app's module-federation.config.ts, you decide which components or modules are "exposed" (available to be borrowed by the host).

// projects/my-remote-app/module-federation.config.ts
export default {
  name: 'myRemoteApp',
  exposes: {
    // We name it './Component' so the host knows how to find it!
    './Component': './projects/my-remote-app/src/app/my-remote-component/my-remote-component.component.ts',
  },
};
Enter fullscreen mode Exit fullscreen mode

2. In the Host App: Find Your Remotes

In your host app's module-federation.config.ts, you tell the host where to look for your micro frontends.

// projects/host/module-federation.config.ts
export default {
  name: 'host',
  remotes: [
    {
      // The name should match the name in the remote's config!
      name: 'myRemoteApp',
      url: 'http://localhost:4201/remoteEntry.json',
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

3. Loading the Remote Dynamically!

The coolest part! In your host app's routing configuration, you can use loadRemoteModule to load your remote component only when the user needs it.

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

Conclusion: You Did It!

Congratulations! You've just set up a modern, scalable micro frontend architecture using 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!

Top comments (0)