Nx Module Federation with 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，使用RemoteEntryModule或其他功能模块代替，例如DashboardModule,NavigationModule等(您已经在上面使用RemoteEntryModule的示例中这样做了)

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

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

单个远程的RemoteEntryModule/功能模块应该只导入CommonModule。

您可以在单个mfe的AppModule中导入BrowserModule/BrowserAnimationsModule(除了RemoteEntryModule/功能模块)，这样它们将独立构建和服务-AppModule代码不应该暴露给shell。