This project shows an example of using Webpack 5 Module Federation with Angular v11-next.5, note the use of yarn, this is required to override the webpack version for the angular cli
- Install packages:
yarn install - Start the mdmf-shell:
ng serve mdmf-shell - Start the Microfrontend:
ng serve mdmf-profile - Open the shell http://localhost:4200
- Click the profile navigation link to load the remote Microfrontend
The shell project located in: projects/mdmf-shell folder, its contains the shell application which is used to load remote Microfrontends using dynamic routing constructed from the Microfrontend array. The list of Microfrontends can be loaded from a config if required, but for the example it is just an hardcoded array.
The profile project located in: projects/mdmf-profile contains a profile module with some child routes configured. The profile module is exposed as a remote module within the Module Federation config:
plugins: [
new ModuleFederationPlugin({
name: "profile",
library: { type: "var", name: "profile" },
filename: "remoteEntry.js",
exposes: {
ProfileModule:
"./projects/mdmf-profile/src/app/profile/profile.module.ts",
},
shared: ["@angular/core", "@angular/common", "@angular/router"],
}),
];