Angular 6 Creating Singleton Service

Question

I understand there have been some changes in Angular 6 with the way singleton services have to be created. I have an Auth Service that needs to be constructed once for each component that accesses it. I set the provider to root for the service:

@Injectable({
  providedIn: 'root'
})

And in my app.module.ts file, I set AuthService as one of my providers in NgModule. However, whenever I route between different components that use the Auth service, it creates a new instance of the Auth Service (clearing data from the first time it was called). How do I ensure that the Auth Service is only instantiated once, and then access that instance among different components?

Answer 1

That's the default behaviour of adding providedIn to the service level. As per Docs

providedIn here tells Angular that the root injector is responsible for creating an instance of the HeroService. Services that are provided this way are automatically made available to the entire application and don't need to be listed in any module.

in your case just remove the providedIn: 'root' and have only under provides in the module.ts. Refer the following answer.

Answer 2

To avoid any other confusion you can create singletons in two ways, just as stated in the docs (singleton-services):

• Declare that the service should be provided in the application root.
  @Injectable({providedIn: 'root'}).
  The service should not be imported in any module then.
• Include the service in the AppModule or in a module that is only imported by the AppModule.
  Here no need to use {providedIn:'root'}.

In my case singleton services did not work when using JIT (normal ng build / ng serve). For me it only worked when using AoT (ng build --aot / ng serve --aot).