Guide to Creating an Angular-based Micro-frontend Application Using Native Federation

Micro-frontends are an architectural pattern that extends the concept of microservices to frontend development. It involves breaking a large frontend application into smaller, independent and deployable components.

In this article, we will learn how to implement a micro-frontend architecture using Native Federation. We will:

• Create one host application
• Create two remote client applications
• Load the remote applications dynamically in the host application using routing or dynamic component loading

Let’s begin by creating the remote applications.

Creating Remote Apps

We can use the Angular CLI to scaffold the client application. Let’s create a remote app using the CLI command below.

ng new remote-app1

After successfully creating the project, configure the Angular application as a remote app in the micro-frontend (MFE) setup by running the schematic command shown below.

ng add @angular-architects/native-federation --project remote-app1 --port 4201 --type remote

Make sure to pass your project name after the --project flag (in this case, remote-app1). The CLI will then prompt you to confirm. After that, it will run the schematics and configure the Angular project as a remote application.

After the installation completes successfully, you will see a new federation.config.js file added to the project.

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
module.exports = withNativeFederation({
  name: 'remote-app2',
  exposes: {
    './Component': './src/app/app.ts',
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Add further packages you don't need at runtime
  ],
  // Please read our FAQ about sharing libs:
  // https://shorturl.at/jmzH0
  features: {
    // New feature for more performance and avoiding
    // issues with node libs. Comment this out to
    // get the traditional behavior:
    ignoreUnusedDeps: true
  }
});

Also, you will see changes in the angular.json file. Ideally, you should not change anything in this file except the exposes object. By default, it exposes the AppComponent, but you can also choose to expose routes if needed.

Read full article here – https://www.telerik.com/blogs/guide-creating-angular-based-micro-frontend-application-native-federation

I hope you find this article useful. Thanks for reading.