如何在webpack配置Angular 14中添加graphql加载程序规则

Question

我正在进行一个poc项目，用Angular 14实现模块联合。我想在webpack配置中包含graphql加载程序规则。但它不起作用。

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
module.exports = {
module: {
rules: [
{
test: /.(graphql|gql|graphqls)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
}
],
},
}, withModuleFederationPlugin({
name: 'sampleUi',
exposes: {
'./Module': './projects/sample-ui/src/app/search/search.module.ts',
},
shared: shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
sharedMappings: [],
});

我想在这里使用ModuleFederationPlugin助手，因为它允许主机和mfe之间的数据共享。

Answer 1

当我试图让我的遥控器使用angular库中的graphql标记时，我也遇到了类似的问题。我使用了Webpack中的ModuleFederationPlugin，而不是AngularArchitects中的。这解决了我的问题。希望这能帮助其他人。