According to my understanding of Angular 2 rc5
, to make a service from another module (not AppModule
) available as a singleton to every component, even those lazy-loaded, we don't include the service in the providers
array of that other module. We instead export it with RouterModule.forRoot()
and import the result in AppModule
The SharedModule should only provide the UserService when imported by the root AppModule. The SharedModule.forRoot method helps us meet this challenge...the SharedModule does not have
providers
...When we add the SharedModule to the imports of the AppModule, we call forRoot. In doing so, the AppModule gains the exported classes and the SharedModule delivers the singletonUserService
provider at the same time
I'm really struggling with how to make a 3rd-party service (a service used by a module in the imports
array of my AppModule
) available to lazy loaded routes. I have no control over this 3rd-party module, so I cannot just remove that service from the NgModule.providers
array of that module and place it inside RouterModule.forRoot()
as I would with one of my services.
The specific service is MdIconRegistry
, which is in providers
for the MdIconModule
of Angular Material 2 alpha 7-3
. This service is used to register svg icons that can then be displayed on the page with the <md-icon svgIcon='iconName'>
tag. So:
- I imported
MdIconModule
in my rootAppModule
- I used the service in question to register svg icons in my
AppComponent
The icon is visible and works well, but only in the modules that were loaded at launch. Lazy-loaded modules cannot see these icons, so I suspect that the Angular injector is not injecting the same instance of the MdIconRegistry
service.
tl;dr: How can I make the service from a 3rd-party module a singleton available to my lazy-loaded components?
Here is a plunker that demonstrates the problem (coded in typescript
).
PS: This just got the attention of the MdIconModule
developer on github.