Angular library service always has a new instance

Question

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?

Erfan Farhadi · Accepted Answer · 2024-08-04 14:03:57Z

0

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 {}

answered Aug 4, 2024 at 14:03

Erfan Farhadi

1311 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

L. Kvri Over a year ago

My app contains eager and lazy loaded modules. I import the CommonLibModule in the AppModule, because I use the wait spinner in AppComponent, I listening it is changed or not display or not the wait spinner. But what about The other modules? Currently I importing the CommonLibModule every other modules, does not matter it is lazy or eagerly loaded. But I not provide at all any modules in the application the WaitSpinnerService. As I see more instance will created from the WaitSpinnerServion inspire of the fact that I use ProvidedInű: 'root'.

Naren Murali · Accepted Answer · 2024-08-04 03:28:56Z

0

If you service is having provided in root, when you import the library module, this service is automatically added to the root of your application. So no need to add it to the providers array of the app module.

Check if your lazy loaded modules have the spinner service added the the providers array of the component/module. This causes a new service initialisation.

Also try checking if your common module is imported in the lazy loaded modules, with forRoot or for child, this will add the providers at the lazy loaded module level

edited Aug 4, 2024 at 3:28

answered Aug 4, 2024 at 3:02

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

3 Comments

L. Kvri Over a year ago

My "common module" is my library module from my angular library , So I need to import it into Lazy loaded module, if I understand good I no need to add the spinner service in provider array, cause of it can create new service instance. Am I correct?

Naren Murali Over a year ago

@L.Kvri yes, that is creating the new instance

Naren Murali Over a year ago

@L.Kvri did issue get resolved?

Collectives™ on Stack Overflow

Angular library service always has a new instance

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related