Angular library service always has a new instance

In Angular 17, There is an Angular library named CommonLib and It contains a WaitSpinnerService which has a private class variable waitSpinner = new EventEmitter();

I use the CommonLib WaitSpinnerService in the AppComponent so I need to import it in the AppModule. I emphasize the WaitSpinnerService is providedIn: 'root'.

In the appComponent's constructor, I listen to the WaitSpinnerService waitSpinner.asObservable via subscribe to turn on or off the wait spinner.

I have a lot of Lazy loaded modules. How it's possible, that when I navigated to a lazy loaded module, always creating a new WaitSpinnerService I see when I navigated to a lazy loaded module, always landed the execution of the constructor of the WaitSpinnerService.

More details about the modules hierarchy: AppModule

SharedModule

• ModuleAAA (eagerly loaded) import CommonLib, import SharedModule
• ModuleBBB (eagerly loaded) import CommonLib, import SharedModule
• ModuleCCC (lazy loaded) import CommonLib, import SharedModule
• ModuleDDD (lazy loaded) import CommonLib, import SharedModule

Each place the CommonLibModule.forRoot() was used. What will be the right module organization to keep the WaitSpinnerService remains singleton in the App?

you can use this pattern

@NgModule({
  providers: [WaitSpinnerService]
})
export class CommonLibModule {
  static forRoot(): ModuleWithProviders<CommonLibModule> {
    return {
      ngModule: CommonLibModule,
      providers: [WaitSpinnerService]
    };
  }
}

and then import as like as below

@NgModule({
  imports: [
    CommonLibModule.forRoot()
  ],
  ...
})
export class AppModule {}