Nx 模块与 Angular 联合 - 没有 HttpClient 提供程序

Question

我已经使用Angular (13.3.0)和@nrwl/angular (13.10.3)模块联合设置了一个微前端Nx (13.10.3)工作区。 当我尝试加载正在加载远程模块的路由时，出现以下错误。 我在app.module.ts添加了HttpClientModule 。

core.mjs:6500 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(RemoteEntryModule)[HttpClient -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
NullInjectorError: R3InjectorError(RemoteEntryModule)[HttpClient -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (core.mjs:11160:27)
    at R3Injector.get (core.mjs:11327:33)
    at R3Injector.get (core.mjs:11327:33)
    at R3Injector.get (core.mjs:11327:33)
    at NgModuleRef.get (core.mjs:21886:33)
    at R3Injector.get (core.mjs:11327:33)
    at NgModuleRef.get (core.mjs:21886:33)
    at Object.get (core.mjs:21563:35)
    at lookupTokenUsingModuleInjector (core.mjs:3365:39)
    at getOrCreateInjectable (core.mjs:3477:12)
    at resolvePromise (zone.js:1211:1)
    at resolvePromise (zone.js:1165:1)
    at zone.js:1278:1
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25605:33)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:585:1)

Answer 1

我的团队最近经历了这个过程，这对我们来说是跨多个遥控器的：

对后代的快速警告：避免暴露遥控器的AppModule ，使用RemoteEntry或其他功能模块，例如DashboardModule 、 NavigationModule等（您已经在上面的示例中这样做了）

1. 在 shell 的AppModule中导入HttpClientModule
2. 在远程的RemoteEntryModule或功能模块中导入HttpClientModule 。

shell 应该在其AppModule中导入BrowserModule / BrowserAnimationsModule 。

单个遥控器的RemoteEntryModule /feature 模块应该只导入CommonModule 。

您可以在各个 MFE 的 AppModule 中导入BrowserModule / BrowserAnimationsModule （除了您的RemoteEntryModule /feature 模块），以便它们独立构建和服务 - AppModule代码不应暴露给AppModule 。