Can lazy-loaded modules share the same instance of a service provided by their parent?

Using a forRoot, as mentioned here, is what you need probably. The problem it’s meant to solve, is directly related to the problem you are experiencing with lazy loaded modules getting their own service.

It’s explained here in Configure core services with forRoot, but that section doesn’t explain about the lazy-loading issue. That is explained with a little warning at the end of Shared Modules

Do not specify app-wide singleton providers in a shared module. A lazy loaded module that imports that shared module will make its own copy of the service.

@NgModule({})
class SharedModule {
  static forRoot() {
    return {
      ngModule: SharedModule,
      providers: [ MyService ]
    };
  }
}

@NgModule({
  import: [ SharedModule.forRoot() ]
})
class AppModule {}

@NgModule({
  imports: [ SharedModule ]
})
class LazyLoadedModule {}

This makes sure that the lazy loaded module doesn’t get the service. But whether or not the module is lazy loaded or not, this is the pattern that is recommended for app-wide services. Though it should be noted that if you don’t have any lazy loaded module, not using the forRoot patter, and just importing SharedModule, it will only be one instance of the service. But this pattern should still recommended to be followed.


UPDATE

I guess I jumped to quick on answering without fully looking at the question. In the question, there is no mention of any shared module. It seems the OP is simply trying to add the service to the @NgModule.providers in both the app module and the lazy loaded child module.

In this case, simply remove the service from the child module providers. It is not needed. The one added in the app module is enough for the child to be used.

Just remember that providers are app wide (except in the problem case this post is about), while declarations are not.

Leave a Comment