How do I provide a service in a lazy-loaded module and have that service scoped to just the lazy-loaded module and its components?

How lazy loading works:

After some deep investigation, it seems as though the problem is related to how lazy loading is implemented.

In your case, your lazy loaded module actually had routing to 2 different components within it - both of those components were directly exposed as Router.forChild routes. But, as a result, when you navigated to each component, a separate instance of your lazy loaded module's providers were added to each component.

Since you actually wanted all of the components in the lazy loaded module to share the same instance of their provided services, you need to create a single 'root' component and then have your two components be children of that root component.

It seems as though when lazy loading, the providers in your module will be added to the injector of the component at the root of your module. Since you have two 'root components', they each got separate instances of the services.

The solution was to create a single root component whose injector will receive the lazy loaded services, which can then be shared by any child components.

Great built-in solution provided by Angular 6.If you're using Angular 6+ (check your package.json to find out), you can provide application-wide services in a different way.

Instead of adding a service class to the providers[] array in AppModule , you can set the following config in @Injectable() :

@Injectable({providedIn: 'root'})export class MyService { ... }

This is exactly the same as:

export class MyService { ... }

and

import { MyService } from './path/to/my.service';@NgModule({    ...    providers: [MyService]})export class MyService { ... }

Using this new syntax is completely optional, the traditional syntax (using providers[] ) will still work. The "new syntax" does offer one advantage though: Services can be loaded lazily by Angular (behind the scenes) and redundant code can be removed automatically. This can lead to a better performance and loading speed - though this really only kicks in for bigger services and apps in general.

Source : Udemy

Simply add your LazyModuleService as a provider in your LazyLoadedModule. You'll be able to use it only in the components in that module.