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.
Add a comment
|
1 Answer
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
providersarray of an Angular Module so register them onto the injector of a service. And in order to do that, you'd have to add animportstatement 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
providedInfield in the@Injectabledecorator'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
providersarray 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 animportstatement 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.
11 Comments
kashpatel
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.
SiddAjmera
@SurenSaluka, a service would never be added to the
declarations array by the CLI. The declarations array is only meant for the declarables like Components, Directives and Pipes.SiddAjmera
@SurenSaluka, again, as I said, Angular Services have no place in the
declarations array. The declarations array is only for declarables like Components, Pipes, and Directives. You can read more about the declarations array here on the Angular Docs. 🙂SiddAjmera
@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
@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 out to understand this better. Hope this helps. 🙂 |