webpack-mfe-angular-13

Reusable web component using @angular/elements(Angular 13) leveraging the power of Module Federation feature of webpack.

Used libraries

• @angular/core v13.3.11
• @angular/elements v13.3.11
• @angular-architects/module-federation v14.0.1
• @angular-architects/module-federation-tools v14.3.10
• @ngxs/store v3.7.6
• ngx-build-plus v13.0.1
• rxjs v7.5.0 & v6.5.4
• zone.js v0.11.4
• typescript 4.6.2

Design and architecture

There are three(3) different web component created from three(3) individual angular projects.

• Host
• App1
• App2

Host application will load App1 and App2 applications using angular module federation api which in turn uses webpack.

Directory structure

| --  package.json  
| --  lerna.json  
| --  | -- host  
| --  | -- | -- package.json  
| --  | -- app1  
| --  | -- | -- package.json  
| --  | -- app2  
| --  | -- | -- package.json  

Run & Build

This project is a monorepo created using lerna.

To run the Host containing App1 and App2:
npm start from package.json and open http://localhost:4200/application/host

One can also run App1 and App2 individually.

• To run App1 npm run start:app1 from package.json and open http://localhost:4201/application/app1.

• To run App2 npm run start:app2 from package.json and open http://localhost:4202/application/app2.

For each button click on respective applications

• a backend http request will happen
• on successful http response counter will increase by one

---

Issues

• @ngxs/store's fire and wait pattern using Observables does not work when mfes' are being loaded using webpack [#1921]. (Fixed in v3.7.6)
  • @ngxs/store fire & wait pattern when handler is returned the asynchronous work from the @Action method.
  • http client to be used. No http network call.
  • If application is requested without hosting to another application, it works!
    In this case, if we run app1 and load without using any webpack feature, it works!
    How? Run npm start from app1's package.json and open http://localhost:4201/application/app1
  • If shared libraries are being removed from webpack.config.js, it works!
    
  • If we choose fire & forget pattern, i.e not returning the handle to the asynchronous work from the @Action method, it works!
    If Observables are converted to promises, both fire & wait and fire & forget pattern works!
    Reference: ./app1//src/store/state/count.state.ts

If you return an Observable NGXS will subscribe to the observable for you and bind the action's completion lifecycle event to the completion of the Observable.

Looks like this is not working for the mentioned cases.