ModuleFederation

This project was generated with Angular CLI version 10.0.3.

Steps to create micro frontend

1. 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/cli@11.0.0-rc.1
   @angular/core@11.0.0-rc.1
   

2. Create a clean workspace using this command:

   ng new module-federation --createApplication=false

3. Set yarn as your package manager

   ng config -g cli.packageManager yarn

   Why?

4. Add the webpack resolution version in the package.json file.

   "resolutions": {
       "webpack": "5.0.0"
   },

5. 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.