Combining Single-spa Angular Applications with Webpack Module Federation

Single-spa is a JavaScript framework for creating micro-frontends. It allows you to build SPAs (single-page applications) using multiple frameworks and libraries, such as Angular, React, and Vue. With the introduction of webpack module federation, it’s now easier than ever to create a Single-spa application using Angular.

Webpack module federation is a new feature of webpack 5 that enables you to share code between different JavaScript bundles. It allows you to create a federated module, which can be consumed by other applications. This is incredibly helpful when building micro-frontends, as it allows you to share common code, such as UI components and utilities, between different applications.

To create a Single-spa application using Angular and webpack module federation, you first need to set up a new Angular project. You can do this by running the following command in your terminal:

“`html

ng new my-angular-app

“`

Once you have set up your Angular project, you can then install the necessary dependencies for Single-spa and webpack module federation. You can do this by running the following commands:

“`html

npm install single-spa single-spa-angular webpack webpack-cli @angular-builders/custom-webpack --save

“`

Next, you need to configure your Angular app to work with Single-spa and webpack module federation. You can do this by creating a new webpack configuration file and adding the necessary configuration for module federation. Here’s an example of what your webpack configuration file might look like:

“`html

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const singleSpaAngularWebpack = require('single-spa-angular-webpack');

return {
...singleSpaWebpackConfig,
plugins: [
new ModuleFederationPlugin({
name: 'my_angular_app',
library: { type: 'var', name: 'my_angular_app' },
filename: 'remoteEntry.js',
exposes: {
'./Module': './src/app/app.module.ts',
},
}),
],
};
};

“`

In this configuration file, we are using the ModuleFederationPlugin to create a federated module for our Angular app. We are exposing our app module, which can be consumed by other applications. We also specify the name of our app and the filename for our remote entry file.

Once you have set up your webpack configuration file, you can run the build command to build your Angular app with module federation support. You can do this by running the following command:

“`html

ng build --prod

“`

After building your Angular app, you should see a new remote entry file in your dist folder. This file contains the necessary code for consuming your Angular app as a federated module.

Finally, you can create a Single-spa application that consumes your Angular app as a federated module. You can do this by creating a new Single-spa root config and importing your remote entry file. Here’s an example of what your root config might look like:

“`html

import { registerApplication, start } from 'single-spa';
import { loadApp } from 'single-spa-angular';
import { APPS_CONFIG } from './constants';

Promise.all(
APPS_CONFIG.map(({ name, url, src }) => {
return loadApp({
name,
app: () => System.import(src),
activeWhen: (location) => location.pathname.startsWith(url),
});
})
).then(() => {
start();
});

“`

In this root config, we are using the loadApp function from single-spa-angular to load our Angular app as a federated module. We specify the name of our app, the location of our remote entry file, and the URL where our app should be active.

With these steps, you have successfully created a Single-spa application using Angular and webpack module federation. You can now start building micro-frontends with ease, using the power of Angular and module federation.