Saturday, 17 June 2017

A Multiplicity of Singleton Services

Angular Services are singletons right? Google it and you will get plenty of pages saying they are. Well sometimes they are and sometimes they are not!

I was working on a service that didn't seem to be working. To debug, I put a print statement in the constructor and I received 2 messages. So what's happening? Turns out to be down to Providers

Suppose you have a component and you want to use a service, you may have declared it in each component like this:

providers: const [TextProcessingService]

This actually creates a new instance before injecting it into your component.

So say we only want one instance ever? How do we do it? First step, delete that Providers declaration. Next declare at the bootstrap level:

  bootstrap(
      AppComponent, [TextProcessingService]
  );

Hope this blog post clears up confusion for anyone else. It is actually quite a powerful feature, allowing you to keep services and components totally separate.