我们添加了 Angular Module Federation 插件。添加构建成功后，但是当我们运行 ng serve 并尝试在浏览器中查看应用程序时出现以下错误
NPM 版本：6.14.13
角 CLI：12.1.4
节点：14.17.1
包管理器：yarn 1.22.10
操作系统：达尔文 x64
角度：12.1.4
打字稿：4.3.5
NullInjectorError: R3InjectorError(e)[t -> t -> Qe -> e -> e -> e -> e]:
NullInjectorError: No provider for e!
at pu.get (716.js:1)
at Cu.get (716.js:1)
at Cu.get (716.js:1)
at Cu.get (716.js:1)
at dr (716.js:1)
at Module.hr (716.js:1)
at Object.e.ɵfac [as factory] (388.js:1)
at Cu.hydrate (716.js:1)
at Cu.get (716.js:1)
at dr (716.js:1)
应用程序包.json 文件
{
"name": "nurseline-ui",
"version": "1.0.1",
"scripts": {
"ng": "ng",
"start": "ng lint && ng serve",
"build": "ng lint && ng build",
"build-prod": "ng lint && ng build --prod --base-href /nurseline/",
"build-prod-all": "npm run clean -all && yarn install && npm run build-prod",
"test": "ng test",
"lint": "ng lint",
"lintfix": "ng lint --fix=true",
"e2e": "ng e2e",
"clean": "rm -rf node_modules/@anthem",
"clean-all": "rm -rf node_modules && rm -rf ../nurseline-client/node_modules && rm package-lock.json && rm ../nurseline-client/package-lock.json && rm -rf ../benefits-search/node_modules && rm ../benefits-search/package-lock.json || true",
"refresh": "npm run clean && npm install && npm run build",
"refresh-all": "npm run clean-all && npm install && npm run build",
"format:fix": "pretty-quick --staged",
"format:fixall": "pretty-quick",
"precommit": "run-s format:fix lint",
"format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
},
"private": true,
"dependencies": {
"@angular-architects/module-federation": "^12.2.1",
"@angular/animations": "^12.1.2",
"@angular/cdk": "^12.1.2",
"@angular/common": "^12.1.2",
"@angular/compiler": "^12.1.2",
"@angular/core": "^12.1.2",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "^12.1.2",
"@angular/localize": "^12.1.2",
"@angular/material": "^12.1.2",
"@angular/platform-browser": "^12.1.2",
"@angular/platform-browser-dynamic": "^12.1.2",
"@angular/router": "^12.1.2",
"@ng-bootstrap/ng-bootstrap": "9.1.3",
"@ng-idle/core": "^10.0.0-beta.1",
"@ng-idle/keepalive": "^10.0.0-beta.1",
"@stomp/ng2-stompjs": "^7.2.0",
"@types/lodash": "^4.14.168",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"angular-progress-bar": "^1.0.11",
"angular2-moment": "^1.9.0",
"bootstrap": "4.5.2",
"classlist.js": "1.1.20150312",
"core-js": "3.6.5",
"if-env": "1.0.4",
"jquery": "3.3.1",
"moment": "^2.27.0",
"ngx-build-plus": "^12.0.1",
"ngx-json-viewer": "2.4.0",
"ngx-markdown": "11.1.3",
"ngx-skeleton-loader": "^2.9.1",
"ngx-toast-notifications": "^1.3.0",
"ngx-webstorage-service": "4.1.0",
"rxjs": "6.6.0",
"vanilla-text-mask": "^5.1.1",
"web-animations-js": "2.3.1",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.2",
"@angular-eslint/builder": "12.3.1",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/schematics": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",
"@angular/cli": "~12.1.2",
"@angular/compiler-cli": "~12.1.2",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"eslint": "^7.26.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-plugin-import": "^2.23.4",
"husky": "^7.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^11.0.1",
"prettier": "^2.3.2",
"protractor": "~7.0.0",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.3.5"
}
}
webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
path.join(__dirname, 'tsconfig.json'),
[/* mapped paths to share */]);
module.exports = {
output: {
uniqueName: "mfePOC",
//publicPath: "auto"
},
optimization: {
runtimeChunk: false
},
plugins: [
new ModuleFederationPlugin({
remotes: {
host: {
external: "http://localhost:4000/remoteEntry.js"
}
},
shared:{
"@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
"@ag-grid-enterprise/all-modules": {singleton: true, strictVersion: true},
"subsink": { singleton: true, strictVersion: false },
...sharedMappings.getDescriptors()
}
}),
sharedMappings.getPlugin()
],
};
任何帮助表示赞赏。