I am getting a NullInjectorError error when I use an Angular component in a federated module (via remoteEntry.js), while it is working well in a standalone Angualar app.
It is (and has to be) a standalone angular component.
The service that I am injecting is declared via an abstract class (declared in the same Angular component library project), while the specific implementation is declared in a module in another project (to be able to have different implementations of the data access, depending on the environment, where the micro-frontend or the specific individual component is deployed).
I've built a repro sample. And here is the module/class/service design diagram:
But I am getting:
NullInjectorError: R3InjectorError(Standalone[FeatureComponent])[MassCommunicationService -> MassCommunicationService -> MassCommunicationService -> HelloService -> HelloService]:
NullInjectorError: No provider for HelloService!
Following repo shows the step-by-step configuration of the app shell and the federated module (both pretty standard) as per this article: Dynamic Module Federation with Angular.
Least reproducible sample: https://github.com/jan-dolejsi/angular-module-federation-sample/tree/service-to-service-injection
Note that the main branch has the last working version (without the service-to-service injection) for comparison.
Answers provided elsewhere:
- provide the specific implementation in the standalone component's provider list is not applicable, because the service implementation depends on the environment where the component is used.
- bootstrapping works differently for federated modules is quite a helpful hint, however, again, the component should not know which specific implementation it should be using at runtime
Is this an impossible ask? A generic shared component with injectable service implementation provided by a module that is loaded via remoteEntry.js?
Help appreciated.