Angular Tutorial — Injectable Decorators & Tree Shakable Providers

Angular Jun 26, 2019

In this Angular tutorial, we will see how to handle injectables in Angular in
more detail. and this is also a most asked angular interview questions
We
have seen before how our services are being registered in the Angular dependency
system — you can read about it
here.

You will notice that in our service did not use any decorator for services,
such as an Injectable.

Now let us suppose we have two services one of them is SQLService, and the other
is an Oracle service. We have registered both the services in the app component
level and notice we are using SQL service in app component.

Angular will only provide the instance of the service if it was requested
somewhere else it wont create the instances of dependencies for example if we
remove the constructor of app component it will not instantiate the sqlservice
instance
Now let’s open the dev tools and go to the source tab and see the
main.js file over there and search for oracle keyword as shown in the image
below.

So we will see although we are not using Oracle service anywhere in our code
then also it’s been included in the main bundle on angular which increases the
size of the primary packet and is directly proportional to the speed of our app.

So the conclusion is that only those files should be included in the main
bundle which is required or demanded as the dependency by other pieces.
In
solving this problem, Injectable comes into the picture. So iI highly recommends
reading my last article
. if you are
not already familiar with the configuration object required to register a
service in Angular.

So we have looked to provide a property which is an instance of the injection
token which helps Angular to identify our dependency uniquely. The other one is
a useFactory, function responsible for creating the instance of our dependency
and which deps is an array which contains all sub-dependencies if it exists.

We will now remove both the services from our providers array and decorate
the services with an injectable decorator who also accepts a configuration
object similar to providers configuration object so let’s have a look at it:

In this object, there is a mandatory property that is whichprovidedIn is by
default “root.”
the other property is useFactory which will a function
responsible for creating the object of our dependency so now our code will look
something like this:

Now you can see that we have injected the SQL service into our app component and
we are not using the Oracle service so let us go to the main.js in the source
tab of our browser Dev Tools and search for SQL and Oracle. We will see that we
have 0 occurrences of Oracle and some occurrences of SQL.

This kind of on-demand provider is known as a Tree Shakable provider, used by
Angular’s dependency injection system in a way that can improve the performance
of an Angular application. Don’t hesitate to clap or follow if you learn
something new. Thanks!
Thanks a lot for more this kind of articles visit
Best Angular Tutorials

Thanks



Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning