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 。