This project was generated with Angular CLI version 10.0.3.
-
Install the version of angular that supports webpack 5:
Angular 11 will support webpack, but currently the only package that we could use is:
@angular/[email protected] @angular/[email protected]
-
Create a clean workspace using this command:
ng new module-federation --createApplication=false
-
Set yarn as your package manager
ng config -g cli.packageManager yarn
Why?
-
Add the webpack resolution version in the
package.json
file."resolutions": { "webpack": "5.0.0" },
-
Custom builder for applications:
First of all, create your applications projects:
ng g application demo ng g application shell ng g application pizza-selector
and the we have to add the webpack configuration for module federation:
ng add @angular-architects/module-federation --project demo --port 5000 ng add @angular-architects/module-federation --project shell --port 5100 ng add @angular-architects/module-federation --project pizza-selector --port 5200
This commands are going to change the architect definition of our angular applications and adds the webpack configuration file.
CREATE projects/pizza-selector/webpack.config.js (1029 bytes) CREATE projects/pizza-selector/webpack.prod.config.js (46 bytes) UPDATE angular.json (12803 bytes)
Please note that the webpack.config.js is only a partial webpack configuration. It only contains stuff to control module federation. The rest is generated by the CLI as usual.