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
There are three(3) different web component created from three(3) individual angular projects.
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
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
@ngxs/store
's fire and wait pattern using Observables does not work when mfes' are being loaded using webpack [#1921]. (Fixed inv3.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? Runnpm 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
- @ngxs/store fire & wait pattern when handler is returned the asynchronous work from the
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.