[英]angular, module federation without sharing Inject error
I have angular 12 microfrontend applications which works fine if I share core components like this我有 angular 12 个微前端应用程序,如果我像这样共享核心组件,它们可以正常工作
shared: {
'@angular/core': { eager: true, singleton: true },
'@angular/common': { eager: true, singleton: true },
'@angular/router': { eager: true, singleton: true },
},
but if I remove sharing and define both host and child with empty 'shared' like this child:但是如果我删除共享并像这个孩子一样用空的“共享”定义主机和孩子:
plugins: [
new ModuleFederationPlugin({
name: 'profile',
library: { type: 'var', name: 'profile' },
filename: 'remoteEntry.js',
exposes: {
ProfileModule: './projects/mdmf-profile/src/app/profile/profile.module.ts',
},
shared: {
},
}),
],
host:主持人:
plugins: [
new ModuleFederationPlugin({
shared: {
},
}),
],
I get this error in runtime:我在运行时收到此错误:
ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
at yD (441.js:1:26044)
at Object.gt (441.js:1:26219)
at d.ɵfac [as factory] (441.js:1:168088)
at AE.hydrate (main.js:1:201332)
at AE.get (main.js:1:199395)
at main.js:1:199708
at Set.forEach (<anonymous>)
at AE._resolveInjectorDefTypes (main.js:1:199692)
at new iS (main.js:1:230293)
at hd.create (main.js:1:230989)
at Ge (polyfills.js:1:162723)
at Ge (polyfills.js:1:162219)
at polyfills.js:1:163611
at ce.invokeTask (polyfills.js:1:153753)
at Object.onInvokeTask (main.js:1:235279)
at ce.invokeTask (polyfills.js:1:153672)
at _e.runTask (polyfills.js:1:149032)
at Q (polyfills.js:1:155855)
I tried include angular libraries with 'paths' setting in tsconfig, but it didn't help我尝试在 tsconfig 中包含带有“路径”设置的 angular 库,但没有帮助
"paths": {
"@angular/*": [
"node_modules/@angular/*"
]
},
what should I configure to make it work?我应该配置什么才能使其工作?
I have the same problem我也有同样的问题
I solved it by edit file webpack.config.js .我通过编辑文件webpack.config.js解决了它。 Following code below下面的代码
webpack.config.js webpack.config.js
const ModuleFederationPlugin =
require("webpack/lib/container/ModuleFederationPlugin");
const mf = require('@angular-architects/module-federation/webpack');
const share = mf.share;
const path = require('path');
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
path.join(__dirname, './tsconfig.json'),
[/* mapped paths to share */]);
module.exports = {
output: {
publicPath: "auto",
uniqueName: "<projectNameWithCamelCase>",
},
optimization: {
// Only needed to bypass a temporary bug
runtimeChunk: false
},
resolve: {
alias: { ...sharedMappings.getAliases() }
},
plugins: [
new ModuleFederationPlugin({
// For remotes (please adjust)
name: "<projectNameWithCamelCase>",
library: { type: "var", name: "<projectNameWithCamelCase>" },
filename: "remoteEntry.js",
exposes: {
'./Module': './src/app/.../<module-name>.module.ts',
},
shared: share({
"@angular/core": { singleton: true },
"@angular/common": { singleton: true },
"@angular/router": { singleton: true },
...sharedMappings.getDescriptors()
})
}),
sharedMappings.getPlugin()
],
};
package.json package.json
"dependencies": {
"@angular-architects/module-federation": "14.3.14",
"@angular-architects/module-federation-runtime": "^14.3.14",
"@angular-architects/module-federation-tools": "^14.3.14",
"@angular/core": "^12.2.16",
"@angular/material": "^12.2.13",
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.