共享模块不可用于迫切消耗-角13。

Question

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

TL;DR：

1. 在您的自定义webpack配置中，重复检查您的公共路径--它可能缺少一个尾随的/，WebPack可能错误地将其报告为“不可用于迫切的消费”。
2. 检查路由-您的MFE/remote模块将在主机模块的路由之后接收子路由(因此，如果您的主机在访问“登录”路由时将路由到MFE，则您的MFE将不会获得“登录”路径，它将得到一个空路径(见下面的更新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文件中使用此操作：import('bootstrap').catch(err => console.error(err))，现在可以在控制台中看到以下错误--这完全与新的引导过程有关：ChunkLoadError: Loading chunk projects_host_src_bootstrap_ts failed.

_Note:这个错误是因为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,
  }
]

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

Answer 1

1. 在您的自定义webpack配置中，再次检查您的公共路径--它可能缺少一个跟踪/ WebPack可能错误地将其报告为“不可用于迫切的消费”。
2. 检查路由-您的MFE/remote模块将在主机模块的路由之后接收子路由(因此，如果您的主机在访问路由“登录”时路由到MFE，您的MFE将不会获得“登录”路径，它将得到一个空路径。
3. 可能需要(也可能不需要)引导。

Answer 2

对于原始错误消息，有一个Webpack医生在这个特定的错误上。

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

index.js

import('./bootstrap.js');

bootstrap.js

import React from 'react';

// ... the rest of application root component

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

Answer 3

对我来说，从角开始

ng serve --hmr

似乎就是问题所在。删除热模块重新加载，删除错误。