6

As when we create Component, Pipe with angular-cli commands, CLI automatically adds them in declaration array of a specific module, why this doesn't happens in the case of services.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Rajat Badjatya
  • 760
  • 6
  • 13

1 Answers1

12

Till Angular 5, you were expected to add a service to the providers array of an Angular Module to register it on to the injector of the Angular Module.

Since Angular 6, services were made tree-shakable.

What is tree-shaking?

Well, in simple terms, it means that if you don't have an import statement for a particular service, then it won't be added as a part of your bundle. This will lead to a relatively smaller bundle size.

Why was Angular Services not tree-shakable before Angular 6?

Before Angular 6, you were expected to add a service to the providers array of an Angular Module so register them onto the injector of a service. And in order to do that, you'd have to add an import statement at the top of the file to actually refer to the service. And that would make it non-tree-shakable.

But this changed in Angular 6 after the introduction of the providedIn field in the @Injectable decorator's meta-data. If that's set to a value('root' for instance), then the service would be registered for dependency injection(to the root injector in this case).

And since it would be registered on the injector for dependency injection, we won't have to explicitly add it to the providers array of an Angular Module as that in-turn does the exact same thing. And not being required to add it to the declarations array means, not being required to add an import statement for it at the top of the file.

Which in turn would make the service tree-shakable if not in use.

So to answer your question, if you generated this service via Angular CLI on Version 6.x.x or later, there's a high chance that the service was generated with a providedIn: 'root' added to the @Injectable decorator. And so it wasn't added to the providers array of the Angular Module.

Community
  • 1
  • 1
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • 1
    I would add one more thing: With the latest Angular. Providers (Services) are registered automatically at root level using @injectable({providedIn: 'root'}) decorator. You will have to remove "{providedIn: 'root'}" if you would like to register service at component level. – kashpatel Sep 02 '18 at 00:45
  • Yeap. That would make sense. – SiddAjmera Sep 02 '18 at 05:05
  • Note that although Angular modules can register service providers for the application this is not a recommended practice now. Starting with Angular 6, the recommended way to register service providers is to use providedIn property of the service itself. Not the providers array of the angular module. – VivekDev Apr 16 '19 at 07:46
  • So when the service is declared inside the declaration array by the CLI are we supposed to put it back inside the providers array? if not why? any difference between putting the service inside declaration array and providers array? – SurenSaluka May 23 '20 at 05:48
  • 1
    @SurenSaluka, a service would never be added to the `declarations` array by the CLI. The `declarations` array is only meant for the declarables like `Component`s, `Directive`s and `Pipe`s. – SiddAjmera May 25 '20 at 06:58
  • @SiddAjmera Hi, CLI does add the created service to the declaration array in the module. I'm on Angular 9. The module does not even have the providers array in my project. It still works fine. What I need to know is am I supposed to add the services to the providers array (even by manually) and what advantage I get by doing that? – SurenSaluka May 25 '20 at 07:59
  • I'm still waiting for a response – SurenSaluka May 28 '20 at 13:08
  • 1
    @SurenSaluka, again, as I said, Angular Services have no place in the `declarations` array. The `declarations` array is only for `declarables` like `Component`s, `Pipe`s, and `Directive`s. You can read more about the `declarations` array [here on the Angular Docs](https://angular.io/api/core/NgModule#declarations). – SiddAjmera May 29 '20 at 08:56
  • 1
    @SurenSaluka, to answer your question about the need of adding services to the `providers` array, it's not required as long as the service has the `providedIn` flag set to either `'root'` and the name of the module that you want to register it on as an Injectable. This was a change that happened since Angular 6 when Services were made tree-shakable with the introduction of the `providedIn` field on the metadata object that we pass to the `@Injectable` decorator. – SiddAjmera May 29 '20 at 08:59
  • 2
    @SurenSaluka, so long story short, you'll either have to set the `providedIn` field on the `@Injectable` decorator of a service OR you'll have to add the service to the `providers` array of the Angular Module. Check [this Sample StackBlitz](https://stackblitz.com/edit/angular-provided-in-field-vs-providers-array?file=src/app/sample.service.ts) out to understand this better. Hope this helps. – SiddAjmera May 29 '20 at 09:06
  • fantastic explaination +1 – minigeek Aug 30 '20 at 13:35