Nx Module Federation with Angular - No provider for HttpClient

Question

I have setuped a micro front-end Nx (13.10.3) workspace with Angular (13.3.0) and @nrwl/angular (13.10.3) module federation. When I try to load a route which is loading a remote module I am getting the error below. I have added HttpClientModule in the app.module.ts .

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

My team has recently gone through this process and this is what has worked for us across multiple remotes:

Quick caveat for posterity : avoid exposing the remote's AppModule , use RemoteEntry or another feature module instead eg DashboardModule , NavigationModule , etc. (You are already doing this in the above example)

1. Import HttpClientModule in your shell's AppModule
2. Import HttpClientModule in your remote's RemoteEntryModule or feature module.

The shell should import BrowserModule / BrowserAnimationsModule in its AppModule .

Individual remotes' RemoteEntryModule /feature modules should only import CommonModule .

You can import BrowserModule / BrowserAnimationsModule (in addition to your RemoteEntryModule /feature module) in the individual MFEs' AppModule so they will build and serve independently - AppModule code should not be exposed to the shell.