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)
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
, useRemoteEntryModule
or another feature module instead e.g.DashboardModule
,NavigationModule
, etc. (You are already doing this in the above example usingRemoteEntryModule
)HttpClientModule
in your shell'sAppModule
HttpClientModule
in your remote'sRemoteEntryModule
or feature module.The shell should import
BrowserModule
/BrowserAnimationsModule
in itsAppModule
.Individual remotes'
RemoteEntryModule
/feature modules should only importCommonModule
.You can import
BrowserModule
/BrowserAnimationsModule
(in addition to yourRemoteEntryModule
/feature module) in the individual MFEs'AppModule
so they will build and serve independently -AppModule
code should not be exposed to the shell.