共享模块不可用于急切消费 - Angular 13

Question

我已经阅读了其他答案，但在使用 Angular 13 实施联合模块时没有取得任何成功。我总是收到 'Shared module is not available for eager consumption' 消息。

TL;DR:

Double-check your public path in your custom webpack config - it may be missing a trailing / which WebPack may erroneously be reporting as "unavailable for eager consumption".

Check the routing - your MFE/remote module will receive the child routes after the host module's routing (so if your host is routing to the MFE when hitting the route 'login', your MFE will not get the 'login' path, it will get an empty path (see update 2 below).

Bootstrapping (update 1 below) may (or may not) be required.

托管应用 webpack.config.ts:

export const webpackConfig: Configuration = {
  output: {
    publicPath: 'http://localhost:4200',
    uniqueName: 'host',
  },
  plugins: {
    new container.ModuleFederationPlugin({
      name: "host",
      remotes: {
        "remote-login": "login@http://localhost:4201/remoteEntry.js"
      }
      shared: [
        "@angular/core",
        "@angular/common",
        "@angular/router",
        "@angular/common/http",
      ]
    })
  ]
}

export default webpackConfig;

远程应用：

export const webpackConfig: Configuration = {
  output: {
    publicPath: 'http://localhost:4201',
  },
  optimization: { runtimeChunk: false },
  experiments: { outputModule: true },
  plugins: {
    new container.ModuleFederationPlugin({
      name: "login",
      filename: "remoteEntry.js",
      exposes: {
        LoginComponent: './projects/module1/src/app/pages/login/login.component.ts',
      },
      shared: [
        "@angular/core",
        "@angular/common",
        "@angular/router",
        "@angular/common/http",
      ]
    })
  ]
}

export default webpackConfig;

更新 1：

我试过使用 'bootstrap' 文件。在 main.ts 文件中使用它：import('bootstrap').catch(err => console.error(err)) 现在在控制台中看到以下错误 - 这似乎仅与新的 bootstrap 进程有关： ChunkLoadError: Loading chunk projects_host_src_bootstrap_ts failed.

_注意：此错误是因为 webpack.config.ts 中定义的 public 路径缺少尾部斜杠。引导它尝试从 http://localhost:4200projets_host_src_bootstrap_ts 加载块（缺少端口号后的 /）。

更新 2：

我现在 Error: ASSERTION ERROR: NgModule 'LoginComponent' is not a subtype of NgModuleType. 所以至少我回到了 'Angular-error-land'。

我必须将 LoginModule（LoginComponent 的主目录）中的路由设置为：

export const routes: Routes = [
  {
    path: '', //Note: empty path, _not_ matching the app's 'login' path
    loadChildren: () => import('./login/login.component').then(m => m.LoginComponent),
  }
]

更新 3：有效

所以我将 MFE（LoginModule）路由更改为非惰性路由并且成功了！

export const routes: Routes = [
  {
    path: '', //Note: empty path, _not_ matching the app's 'login' path
    component: LoginComponent,
  }
]

我将回滚 bootstrap 更改并查看是否需要它们，但它至少现在正在使用联合模块！

Answer 1

Double-check 您的自定义 webpack 配置中的 public 路径 - 它可能缺少尾随 /，WebPack 可能会错误地报告为“不可用于急切消费”。
检查路由 - 您的 MFE/remote 模块将在主机模块路由后接收子路由（因此如果您的主机在到达路由时路由到 MFE 'login' ，您的 MFE 将不会获得 'login' 路径，它将获得一个空路径。
可能需要（也可能不需要）引导。

共享模块不可用于急切消费 - Angular 13

Shared module is not available for eager consumption - Angular 13

webpack

angular

更新 1：

更新 2：

更新 3：有效