RouterModule.forRoot() 在模块联合架构中调用了两次

Question

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

问题：我正在使用“webpack”：“5.67.0”和“@angular-architects/module-federation”：“^14.1.1”，并且我的主机应用程序和远程应用程序都是独立工作的。 但是当我尝试查看 shell 内的远程应用程序时，它从上面给了我这个错误。 当我将 forChild() 添加到遥控器时，我的样式和图像并非来自遥控器，它们仅来自主机。 我究竟做错了什么？

来自主机的 Webpack 配置：

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: "container",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        // name: "container",
        // filename: "remoteEntry.js",
        // exposes: {
        //     './Component': './/src/app/app.component.ts',
        // },        
        
        // For hosts (please adjust)
        remotes: {
          "web": "http://localhost:8081/remoteEntry.js",
        },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4' }, 
          "@angular/common": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4' }, 
          "@angular/common/http": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4' }, 
          "@angular/router": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4' },

          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

来自远程的 Webpack 配置：

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'),
  ['home']);

module.exports = {
  output: {
    uniqueName: "web",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  module: {
    rules: [
        {
            test: /\.svg$/,
            use: [
              {
                loader: 'svg-url-loader',
                options: {
                  limit: 10000,
                },
              },
            ],
        },
        {
            test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.css/,
            use: {
                loader: 'file-loader?name=[name].[ext]'
            }
        }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },
        name: "web",
        filename: "remoteEntry.js",
        exposes: {
          './WebsiteModule': './src/app/app.module.ts',
        },
        shared: 
        share({
          "@angular/core": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4', }, 
          "@angular/common": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4', }, 
          "@angular/common/http": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4', }, 
          "@angular/router": { singleton: true, strictVersion: true, eager: true, requiredVersion: '>= 13.2.4', },
          "@angular/material": { singleton: true, strictVersion: true, eager: true },
          "@angular/cdk": { singleton: true, strictVersion: true, eager: true },
          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

Answer 1

我相信您可以更改为微前端提供服务的 url 的 auto 的公共路径，例如

publicPath: "auto"

至

publicPath: "localhost:5000"