共享模块不可用于热切消费 - Angular 13答案

【问题标题】：Shared module is not available for eager consumption - Angular 13共享模块不可用于热切消费 - Angular 13
【发布时间】：2022-06-24 23:42:47
【问题描述】：

我已经阅读了其他答案，但在使用 Angular 13 实现联合模块方面没有任何成功。我总是收到“共享模块不可用于热切消费”的消息。

TL;DR:

仔细检查自定义 webpack 配置中的公共路径 - 它可能缺少尾随 /，WebPack 可能会错误地将其报告为“不可用于热切消费”。

检查路由 - 您的 MFE/远程模块将在主机模块路由之后接收子路由（因此，如果您的主机在点击路由“登录”时路由到 MFE，您的 MFE 将不获取“登录”路径，它将获得一个空路径（请参阅下面的更新 2）。

可能需要（也可能不需要）引导（下面的更新 1）。

宿主应用 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：

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

_注意：此错误是因为 webpack.config.ts 中定义的公共路径缺少尾部斜杠。引导它尝试从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,
  }
]

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

【问题讨论】：

为什么首先需要 Eager？
我想我从来没有质疑过它。我在一个解决方案中看到它并开始使用它......我会删除它并试一试！（编辑：好的，尝试删除急切，同样的错误）
奇怪。您是否使用导入 main.ts 的引导文件来延迟引导？
Angular 中的“本机”引导是否足够？我知道在 React 中你需要/应该有那一层引导，我假设 Angular 的 NgModule Bootstrap 属性是等效的？
我认为 Angular 也需要允许 webpack 配置它的东西..

标签： angular webpack

【解决方案1】：

在您的自定义 webpack 配置中仔细检查您的公共路径 - 它可能缺少尾随 /，WebPack 可能会错误地将其报告为“不可用于热切消费”。
检查路由 - 您的 MFE/远程模块将在主机模块路由之后接收子路由（因此，如果您的主机在点击路由“登录”时路由到 MFE，您的 MFE 将不会获得“登录”路径，它会得到一个空路径。
可能需要（也可能不需要）引导。

【讨论】：

【解决方案2】：

对于原始错误消息，有一个Webpack doc on this specific error。

简而言之，您需要一个异步边界（由文件 bootstrap.js + index.js 的存在创建）以确保在客户端加载时等待共享依赖项：

index.js:

import('./bootstrap.js');

bootstrap.js:

import React from 'react';

// ... the rest of application root component

您也可以将eager: true 添加到共享依赖项中，但这会将它们添加到初始块中，无论它们是否被使用。

【讨论】：