Setup of Webpack Module Federation using the @angular-architects/module-federation npm package instead of doing everything manually as shown in the basic-ng16 code demo.
The remote webpack module contains an Angular module which the shell loads using Angular routing.
The shell app is rendered in a red colored background and the remotely loaded mfe1 app is rendered in a blue colored background.
- Go to
/code-demos/angular-architects-ng16/shell-ng16folder and runnpm i, followed bynpm start. This will start the shell app on http://localhost:4200. - Go to
/code-demos/angular-architects-ng16/mfe1-ng16folder and runnpm i, followed bynpm start. This will start the mfe1 app on http://localhost:4201.
To see the mfe1 app loaded into the shell go to the shell's URL and click the Load Angular module named MyFeatureModule from mfe1 link.
The mfe1 app is an Angular 16 app that contains an Angular feature module named MyFeatureModule, which was created to represent the micro frontend that we want to expose via Webpack Module Federation.
The MyFeatureModule Angular module contains a route that loads the MyComponent Angular component on /my-component. You can use the Go to my-component link on the mfe1 app to load the MyComponent Angular component.
On the webpack configuration file for mfe1 app you will find the declaration of the webpack modules to expose:
exposes: {
"./my-feature-module": "./src/app/my-feature/my-feature.module.ts",
},
The above defines a webpack module that is named my-feature-module and that is mapped to the ./src/app/my-feature/my-feature.module.ts file, which is where the MyFeatureModule Angular module is defined.
When you run the mfe1 app you will see the text MFE1 dev platform. This is to call out the fact that the mfe1 app is not exposed in its entirety via Webpack Module Federation, only the MyFeatureModule Angular feature module is. Everything else in the mfe1 app is there only with the sole purpose of supporting the local development of the mfe1 app, more specifically, the development of the MyFeatureModule Angular feature module.
The shell app is an Angular 16 app that loads the Angular module exposed by the mfe1 app. You can test this by selecting the Load Angular module named MyFeatureModule from mfe1 link which navigates to the /mfe1/my-component route.
The shell app loads the Angular module exposed by the mfe1 app using Angular routing.
The /mfe1 route added to the AppRoutingModule uses an import to lazy load the MyFeatureModule Angular feature module from the mfe1 app. The lazy load is done via the loadChildren function which imports the external webpack module mfe1/my-feature-module at runtime and then accesses the MyFeatureModule Angular module from the mfe1 app. At this point, the loadChildren function loads the routes available from the MyFeatureModule Angular module which means we can access the MyComponent Angular component from the mfe1 app by going to /mfe1/my-component path.
Also note that for typescript to be ok with the import('mfe1/my-feature-module') we must tell it that the module mfe1/my-feature-module exists and we do that by declaring it in the remote-module.d.ts file.
Note
For a better understanding of how the external webpack module from mfe1 is loaded into the shell see How the loading of an external webpack module works .
The setup of Webpack Module Federation was done using the @angular-architects/module-federation npm package, which aims to streamline the setup of Webpack Module Federation for Angular apps. For more info see Basics of @angular-architects/module-federation npm package.
Also, read the official docs at:
- the readme page for the @angular-architects/module-federation npm package
- the tutorial for the @angular-architects/module-federation plugin
This example was based on the The Microfrontend Revolution: Module Federation with Angular article.