Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't Angular CLI add services in providers array automatically?

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.

like image 377
Rajat Badjatya Avatar asked Sep 01 '18 19:09

Rajat Badjatya


People also ask

What does the providers array do in Angular?

Providers is used to register the classes to an angular module as a service. And then, this service classes can be used by other components during the itself creation phase in the module. Actually services can manage to distrubute objects as services using by dependency injection.

How do you create a service inside a component?

The only way to inject a service into a component/directive or any other class is through a constructor. Add a constructor in a component class with service class as an argument as shown below, Here, ArticleService will be injected into the component through constructor injection by the framework.

Where should a service be registered if registering a service in a component?

Registering a Service in a Component Notice that in the providers array of the component, the service is registered and then consumed in the constructor of the component. This way, the service will not be used by any other component, directive, or pipe in the whole app.


1 Answers

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.

like image 169
SiddAjmera Avatar answered Nov 15 '22 12:11

SiddAjmera