Angular 15升级16时Module Federation与SignalR微前端加载失败问题
Angular Module Federation 16 微前端加载异常问题
我们有一个基于微前端基础教程克隆的Angular应用,额外引入了@microsoft/signalr依赖。该应用在Angular及Angular Module Federation 15版本下运行正常,但升级至16版本后,微前端加载失败,控制台抛出以下错误:
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)
复现步骤
- 该仓库基于官方微前端教程仓库,仅额外添加了
@microsoft/signalr": "^7.0.9"依赖 - 切换至
v-15分支,执行npm i,在两个终端分别运行ng s shell和ng s mfe1,可正常显示shell应用和flights微前端 - 切换至
v-16分支,删除node_modules后重新执行npm i,重复上述运行步骤,点击顶部菜单的flights链接,应用加载失败
我已在Module Federation仓库提交相关Issue,目前找到的临时修复方案如下:
临时修复方案
在项目的angular.json文件中,将development配置下的optimization设置为true。
内容的提问来源于stack exchange,提问作者Rathma
相关产品推荐
相关产品推荐

