共享模块无法立即使用 - Angular 13

我读过其他答案，但没有成功地使用 Angular 13 实现联合模块。我总是收到“共享模块不可用于急切消费”的消息。

TL;DR:

1. 仔细检查自定义 webpack 配置中的公共路径 - 它可能缺少尾随/WebPack 可能会错误地报告为“无法立即使用”。
2. 检查路由 - 您的 MFE/远程模块将接收子路由after主机模块的路由（因此，如果您的主机在点击路由“登录”时路由到 MFE，则您的 MFE 将not获取“登录”路径，它将得到一个空路径（请参阅下面的更新 2）。
3. 可能需要（也可能不需要）引导（下面的更新 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 file: 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.所以至少我又回到了“角度误差之地”。

我必须将 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,
  }
]

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

对于原始错误消息，有一个关于此特定错误的 Webpack 文档 https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption.

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

index.js:

import('./bootstrap.js');

bootstrap.js:

import React from 'react';

// ... the rest of application root component

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