![](/img/trans.png)
[英]Module Federation Angular multiple microfrontends from same remote host inject() must be called from an injection context MatCommonModule_Factory
[英]"inject() must be called from an injection context" when importing angular app using module federation architecture
我正在嘗試使用webpack5 模塊聯合在 angular 中實現微前端概念,按照此示例模塊聯合與 angular 進行操作,但我面臨此錯誤
我嘗試了這個答案中提供的解決方案inject() must be called from an injection context但它不起作用。
目前我在兩個應用程序中都使用 angular 版本 11。
正在導入的應用程序的 package.json(子)
"resolutions": {
"webpack": "5.0.0"
},
"dependencies": {
"@angular/animations": "11.0.0-next.6",
"@angular/cdk": "11.0.0-next.6",
"@angular/common": "11.0.0-next.6",
"@angular/compiler": "11.0.0-next.6",
"@angular/core": "11.0.0-next.6",
"@angular/forms": "11.0.0-next.6",
"@angular/platform-browser": "11.0.0-next.6",
"@angular/platform-browser-dynamic": "11.0.0-next.6",
"@angular/platform-server": "^11.0.0",
"@angular/router": "11.0.0-next.6",
"@angular/service-worker": "11.0.0-next.6",
"@fortawesome/angular-fontawesome": "^0.8.0",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.3.1",
"classlist.js": "^1.1.20150312",
"core-js": "^3.1.4",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"js2xmlparser": "^4.0.0",
"moment": "^2.25.3",
"moment-timezone": "^0.5.28",
"ngx-webstorage-service": "^4.1.0",
"node-sass": "^4.12.0",
"post-robot": "7.0.15",
"primeicons": "^1.0.0",
"rxjs": "6.6.3",
"rxjs-tslint": "^0.1.7",
"zone.js": "^0.10.3",
"@angular-architects/module-federation": "^0.9.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1100.0-next.6",
"@angular/cli": "~11.0.1",
"@angular/compiler-cli": "11.0.0-next.6",
"@angular/language-service": "^11.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~12.6.8",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.5",
"serve": "^11.3.2",
"ngx-build-plus": "^10.1.1"
}
package.json 的應用程序導入另一個應用程序(父)
"resolutions": {
"webpack": "5.0.0"
},
"dependencies": {
"@angular-architects/module-federation": "^0.9.3",
"@angular/animations": "^11.0.0",
"@angular/cdk": "^11.0.0",
"@angular/common": "11.0.0-next.6",
"@angular/compiler": "11.0.0-next.6",
"@angular/core": "11.0.0-next.6",
"@angular/forms": "11.0.0-next.6",
"@angular/platform-browser": "11.0.0-next.6",
"@angular/platform-browser-dynamic": "11.0.0-next.6",
"@angular/router": "11.0.0-next.6",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^5.0.0",
"bootstrap": "^4.5.2",
"bowser": "^2.11.0",
"classlist": "^2.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^3.6.5",
"dc-central-modules": "^0.1.27",
"moment-timezone": "^0.5.28",
"post-robot": "7.0.15",
"primeng": "^9.0.0-rc.1",
"query-string": "^6.13.7",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1100.0-next.6",
"@angular/cli": "~11.0.1",
"@angular/compiler-cli": "11.0.0-next.6",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-phantomjs-launcher": "^1.0.4",
"protractor": "~7.0.0",
"serve": "^11.3.2",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.5",
"ngx-build-plus": "^10.1.1"
}
面對同樣的問題,在確定@angular/core
和@angular/common
(可能還有@ngx-translate/core
)必須在 webpack 配置中使用“singleton: true”標志共享和加載一次后,錯誤得到解決。
當您的任何子依賴項未滿足 angular 核心或 angular 常見時,可能會發生這種情況。 嘗試檢查控制台/終端以獲取更多信息。 在我的情況下,例如:highchart 我已安裝在子組件中,並獲得對 angular 核心 10.0.0 與父級的對等依賴。 一旦我更新了版本,錯誤就消失了。
就我而言,我使用了來自@angular-architects/module-federation
package requiredVersion: 'auto' and sharedMappings.getDescriptors()
。 所以我指定了確切的版本。
"@angular/core": { singleton: false, strictVersion: true, requiredVersion: '12.2.15' },
"@angular/common": { singleton: false, strictVersion: true, requiredVersion: '12.2.15' },
"@angular/router": { singleton: false, strictVersion: true, requiredVersion: '12.2.15' },
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.