Wednesday 9 August 2023

Angular module federation regression upgrading from version 15 to 16

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.



from Angular module federation regression upgrading from version 15 to 16

No comments:

Post a Comment