How to add graphql loader rules in webpack configuration Angular 14

Question

I am working on a poc project to implement Module Federation with Angular 14. I want to include the graphql loader rules in the webpack configuration. But it is not working.

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: [],
});

I want to use withModuleFederationPlugin helper here as it allows data sharing between the host and mfe.

Answer 1

I had similar issues when trying to get my remote to work with graphql-tag in an angular library. I resorted to using the ModuleFederationPlugin from Webpack rather than the one from AngularArchitects. This resolved my issues. Hope this helps someone else.