Angular singlton service been created mutiple times

Issue

My application has several modules. See below. StoreService is provided by AssetModule which is imported by the other two services.

• AssetModule
  • StoreService (Injectable, provided by the module)
• DashboardModule
  • AssetModule and StoreService reference
• MapModule
  • AssetModule and StoreService reference

Whenever we route to these modules using the routing config below, StoreService is created each time. Even though StoreService is a singleton. If we lazy load these modules, the problem gets worse, where StoreService is created every time we route to that module. When a new one is created OnDestroy is not called as well. So if we register to observables/emiters, events fire for all out-of-use instances of StoreService.

How do we avoid this kind of behavior?

export const routes: Routes = [
  {
    path: '',
    loadChildren: () => DashboardModule,
    canActivate: [LoginAllRoutesGuard]
  },
  {
    path: 'asset',
    loadChildren: () => AssetModule,
    canActivate: [LoginAllRoutesGuard]
  },
  {
    path: 'map',
    loadChildren: () => MapModule,
    canActivate: [LoginAllRoutesGuard]
  },

Solution

the easer way is defined the service providedIn in root

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class StoreService {

}

Really I don't know if you can providedIn AssetModule makes singleton

@Injectable({
  providedIn: 'AssetModule',
})

Answered By - Eliseo