Fire and wait pattern using Observables with HttpClient doesn't work when mfes' are being loaded using webpack

[swarnadeepsaha]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request

Current behavior

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.
_{as mentioned in the ngxs documentation}

When MFEs are loaded using webpack, It's not working when the handler is returned to the asynchronous work from the @action method which involved backend HTTP call using angular's HTTP client.

GIF - not working when mfe is loaded using webpack

Details of the issue here

Expected behavior

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.
_{as mentioned in the ngxs documentation}

Expecting this should work even when loaded/build using webpack, as it used to work earlier with

• standalone build
• partial build using ngx-build-plus

GIF - expected behavior when mfe is loaded using webpack

Minimal reproduction of the problem with instructions

Github repo

• Run npm start from package.json
• Open http://localhost:4200/application/host. More here
• You'll see App1 counter is not working and there are no backend HTTP calls when you click the button.
• For Host and App2 it's working fine.

GIF - not working when mfe is loaded using webpack

• If we run App2 individually by running npm start:app1 from package.json, it works!
  GIF - App1 works fine when loaded/run individually without using webpack
• If shared libs marked in webpack.config.json are removed, it works!

shared: share({  
        // "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },  
        // "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },  
        // "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },  
        // "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },  
        ...sharedMappings.getDescriptors()  
      })  

• If we convert the http client Observable to Promise it works for both fire & wait and fire & forget pattern.
• if we don't return http client Observable handler(fire & forget) and subscribe the call inside the store, it works! Reference

What is the motivation/use case for changing the behavior?

PNG - micro front end architecture using webpack module federation

| --  package.json  
| --  lerna.json  
| --  | -- host  
| --  | -- | -- package.json  
| --  | -- | -- src  
| --  | -- | -- | -- store
| --  | -- mfe1  
| --  | -- | -- package.json  
| --  | -- | -- src  
| --  | -- | -- | -- store  
| --  | -- mf2  
| --  | -- | -- package.json
| --  | -- mf3 
| --  | -- | -- package.json  
| --  | -- | -- src  
| --  | -- | -- | -- store

In micro frontend architecture there could be mutiple UI project with it's own store instance, which can run, build & deploy individually and also can be loaded and used in the container shell or from any other ui applications.

Environment

Libs:
- @angular/core version: 13.3.11
- @ngxs/store version: 3.7.3

Browser:
- [x] Chrome (desktop) version 105.0.5195.102 (Official Build) (64-bit)
- [x] Chrome (iOS) version 105.0.5195.102 (Official Build) (arm64)
- [x] Firefox (desktop) version 104.0.2 (64-bit)
- [x] Firefox (iOS) version 104.0.1 (64-bit)
- [x] Safari (iOS) version 15.6.1 (17613.3.9.1.16)
- [x] Edge version 104.0.1293.70 (Official build) (arm64)
 
For Tooling issues:
- Node version: 14.15.4
- Platform:  Mac, Linux, Windows

Others:
- @angular/elements: 13.3.11
- @angular-architects/module-federation: 14.0.1
- @angular-architects/module-federation-tools: 14.3.10
- ngx-build-plus: 13.0.1
- rxjs: 7.5.0
- zone.js: 0.11.4
- typescript: 4.6.2

[markwhitfeld]

None of the core team have worked on a MFE app, so this exploration is really interesting. Thank you! And thank you for the awesome effort that you went into for the repro!.

I won't have a moment to crack open the repro right now, but I do have a thought on where this could be going wrong...
In the action pipeline we do some checks for ... instanceof Observable. See:

store/packages/store/src/internal/state-factory.ts

Line 254 in 17a1bb8

if (result instanceof Observable) {

and

store/packages/store/src/internal/state-factory.ts

Line 268 in 17a1bb8

if (value instanceof Observable) {

I suspect that this would not work if there are different versions of rxjs. Have you tried adding rxjs to the shared libs?

Have you followed this guide?
https://www.ngxs.io/recipes/module-federation

If the guide is lacking anything then any contributions would be super welcome!

[swarnadeepsaha]

@markwhitfeld yes we have checked the guide that you have mentioned.
Our use case falls in the standalone category https://www.ngxs.io/recipes/module-federation#stand-alone.

an entry module is needed, which must not be exported in the webpack.config.js

We have marked ngxs in individual ui's app.module.ts and haven't exported the same in the webpack.config.js.

It doesn't work for us.

Please let me know if there are any gaps in our understanding.

[swarnadeepsaha]

@markwhitfeld we'll try adding rxjs to the shared libs
But individual mfe's can have their own rxjs version. if it works don't think it can be used in production code.
Will update

[swarnadeepsaha]

@markwhitfeld thanks for the suggestion.
it works with "rxjs": { singleton: true, requiredVersion: 'auto' }.
Here without singleton: true it is not working, so this configuration is important.
It does work with different versions of rxjs.

Can you please share the document repository link, so that I can update the guide.

But I do feel this need a correction. Other popular store library do work without this configuration in webpack.config.js

[markwhitfeld]

We will look into this issue.
Here is the page to which you would contribute to update the guide:
https://github.com/ngxs/store/blob/release/docs/recipes/module-federation.md
Thank you!

[markwhitfeld]

Yes, I think that we need to find a better way to detect the instance of an observable, as I think that this is the blocker to seeing this work like other libraries. Here is the markdown file in the repository for that documentation page: https://github.com/ngxs/store/blob/release/docs/recipes/module-federation.md An update would be greatly appreciated. Thank you!

…

On Thu, 29 Sept 2022 at 15:46, Swarnadeep Saha ***@***.***> wrote: @markwhitfeld <https://github.com/markwhitfeld> the for the suggestion. it works with "rxjs": { singleton: true, requiredVersion: 'auto' }. Here without singleton: true it is not working, so this configuration is important. Can you please share the document repository link, so that I can update the guide. But I do feel this need a correction. Other popular store library do work without this configuration in webpack.config.js — Reply to this email directly, view it on GitHub <#1921 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAO3U2LR3JWX3UVQGKWEODDWAWMRZANCNFSM6AAAAAAQYVD6PA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[swarnadeepsaha]

Yes, I think that we need to find a better way to detect the instance of an observable, as I think that this is the blocker to seeing this work like other libraries. Here is the markdown file in the repository for that documentation page: https://github.com/ngxs/store/blob/release/docs/recipes/module-federation.md An update would be greatly appreciated. Thank you!
…
On Thu, 29 Sept 2022 at 15:46, Swarnadeep Saha @.> wrote: @markwhitfeld https://github.com/markwhitfeld the for the suggestion. it works with "rxjs": { singleton: true, requiredVersion: 'auto' }. Here without singleton: true it is not working, so this configuration is important. Can you please share the document repository link, so that I can update the guide. But I do feel this need a correction. Other popular store library do work without this configuration in webpack.config.js — Reply to this email directly, view it on GitHub <#1921 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAO3U2LR3JWX3UVQGKWEODDWAWMRZANCNFSM6AAAAAAQYVD6PA . You are receiving this because you were mentioned.Message ID: @.>

Thanks!
will update the MD file and will mention this as a current limitation.

[swarnadeepsaha]

@markwhitfeld do we need to update https://github.com/ngxs/store/blob/release/docs/recipes/module-federation.md as the fix will be available in v3.7.6?

[arturovt]

This has been fixed as part of the v3.7.6 release.
Please test this out and let us know if this is not resolved.

[swarnadeepsaha]

@arturovt issue is resolved. Really thankful for all the efforts.
👍 🏆 Team.