Angular模块联邦webpack复制
Angular模块联邦webpack复制
提问于 2021-09-03 16:01:37
所以我有两个angular应用程序，我正在使用webpack模块联盟将一个导入到另一个中，我让它工作了，但我遇到了一些奇怪的行为。我认为这个问题与this相同或相似，但没有答案，而且已经有一段时间了。
在我的远程应用程序中，我在表下面有一个div，这个表只有在我从数据库获取数据时才在那里，然后它就被隐藏了。当我打开遥控器时，它工作得很好，没有问题，但当我使用shell时，div并没有被隐藏。然后我添加了一个按钮来切换div可见性，但是发生的情况是，当bool标志变为true时，div os会复制，而当bool标志变为false时，则什么也不会发生。然后，我使用这个github中的外壳程序，将飞行组件更改为与我的远程组件完全相同，并导入了我的组件，它只在我的组件上发生。这可以在这个video中看到。
我认为问题出在遥控器而不是主机。
主机webpack.config.ts：
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')
);
module.exports = {
output: {
uniqueName: "shell",
publicPath: "auto"
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
plugins: [
new ModuleFederationPlugin({
// For hosts (please adjust)
remotes: {
// "mfe1": "mfe1@http://localhost:3000/remoteEntry.js",
},
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
// Uncomment for sharing lib of an Angular CLI or Nx workspace
...sharedMappings.getDescriptors()
})
}),
// Uncomment for sharing lib of an Angular CLI or Nx workspace
sharedMappings.getPlugin(),
],
};远程webpack.config.ts：
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: 'mfe1',
publicPath: 'auto',
},
optimization: {
runtimeChunk: false,
},
resolve: {
alias: {
...sharedMappings.getAliases(),
},
},
plugins: [
new ModuleFederationPlugin({
name: 'mfe1',
filename: 'remoteEntry.js',
exposes: {
'./Module': './src/app/app-routing.module.ts',
},
shared: share({
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
'@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
...sharedMappings.getDescriptors(),
}),
}),
sharedMappings.getPlugin(),
],
};我不认为这是必要的，但我以前也错过。
组件类型脚本文件。
hide = true;组件HTML：
<button (click)="hide = !hide">test</button>
<p>hide: {{hide}}</p>
<div *ngIf="hide">
<p>This is a test</p>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-06 09:56:35
所以它看起来问题是我在我正在导出的远程模块上导入了'BrowserAnimationsModule‘。在我移除它之后，它开始正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69047759
复制相关文章
相似问题
腾讯云开发者
