1

We have this simple angular app which is clone of the basic app for microfrontends tutorial with the an addition of a @microsoft/signalr as a dependency. The app works with version 15 of both Angular and Angular Module Federation library, but when updating to version 16 the app fails to load the microfrontend with this error in the console:

localhost/:1  Uncaught TypeError: Failed to resolve module specifier "module". Relative references must start with either "/", "./", or "../".
app.routes.ts:16  ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk node_modules_microsoft_signalr_dist_esm_index_js failed.
(missing: http://localhost:4201/node_modules_microsoft_signalr_dist_esm_index_js.js)
ChunkLoadError: Loading chunk node_modules_microsoft_signalr_dist_esm_index_js failed.
(missing: http://localhost:4201/node_modules_microsoft_signalr_dist_esm_index_js.js)
    at __webpack_require__.f.j (jsonp chunk loading:27:1)
    at ensure chunk:6:1
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (ensure chunk:5:1)
    at Object.get (sharing:45:1)
    at get (consumes:80:1)
    at getStrictSingletonVersion (consumes:50:1)
    at consumes:133:1
    at consumes:85:1
    at 2180 (consumes:138:1)
    at resolvePromise (zone.js:1251:35)
    at resolvePromise (zone.js:1205:21)
    at zone.js:1318:21
    at _ZoneDelegate.invokeTask (zone.js:446:35)
    at core.mjs:25990:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25990:36)
    at _ZoneDelegate.invokeTask (zone.js:445:64)
    at Object.onInvokeTask (core.mjs:26300:33)
    at _ZoneDelegate.invokeTask (zone.js:445:64)
    at Zone.runTask (zone.js:211:51)

Steps to Reproduce: Checkout this repository: (The only difference between this repostiry and the one we have in tutorial section of angular-module-federation docs is the addition of this dependency: "@microsoft/signalr": "^7.0.9" )

https://github.com/HarmoniousHarmony/angular-module-federation-v16-regression

Checkout v-15 branch, run npm i and in two terminals run ng s shell and ng s mfe1. You should be able to see both the sell app and the flights mfe.

Now switch to v-16, remove the node_modules folder and do another npm i, do the same steps above, and navigate to flights link by clicking on top menu link, you will see the app fails to load.

I'm wondering if anyone has a solution for this issue or encountered similar problem while using these two libraries?

I also have opened an issue in module federation repository too.

https://github.com/angular-architects/module-federation-plugin/issues/350

One temporary fix would be Setting optimization to true in angular.json file for "development" configuration.

Rathma
  • 1,196
  • 2
  • 33
  • 65
  • 1
    There is an open issue about this : https://github.com/nrwl/nx/issues/18208 – Matthieu Riegler Aug 04 '23 at 11:31
  • Yeah, but this question might help narrow down the issue. And in my opinion it's no `nx` issue, because in our project we use vanilla angular and module federation from angular-architects. – Rathma Aug 04 '23 at 11:38
  • Is this you : https://github.com/angular/angular-cli/issues/25613 ? – Matthieu Riegler Aug 04 '23 at 11:58
  • No, it is the one https://github.com/angular-architects/module-federation-plugin/issues/350 – Rathma Aug 04 '23 at 12:21
  • 1
    Does this answer your question? [How can I fix ChunkLoadError for signalr](https://stackoverflow.com/questions/76716920/how-can-i-fix-chunkloaderror-for-signalr) – Matthieu Riegler Aug 04 '23 at 12:30
  • 1
    Setting optimization to true in angular.json file for "development" configuration, is a temporary solution. – Rathma Aug 04 '23 at 12:58

0 Answers0