Recently before some time Angular 6 was released and there are a couple of features that are added with Angular 6. In this blog post series, we are going to learn all these new features one by one. Today this post is all about Tree Shakeable providers in Angular 6 which is a new recommended way to create a new provider or service Angular 6. In an earlier version of Angular, we need to register service or provider under provider sections of your module like below.
Now with Angular 6, There is recommended a way to register a provider or service in Angular directly inside the @Injectable decorator using new providedIn attribute. It accepts ‘root’ as a value or any module of your application. When you use ‘root’ your services or providers will be registered as a singleton and you don’t need to add that provider or service in the module. Same way if you add module instead of ‘root’ it will act as a singleton on your module.
This is how its look like now. This is the new way of registering provider or service. This led us to better tree shaking in the application. What was happening in an earlier version of angular is If you add a service in providers list it will finally be added in bungle which is created at the end. Even if it not used in the application which is sad and can increase your size of the bundle. Most of the time we don’t add services in the application which we are not going to use But when you use third-party services it provides a list of services and we want only a few. So new smart Angular 6 compiler add only those services in the bundle which is actually being used. Now let’s create an application and see how it looks like. So I’m going to create an Angular6Provider app with Angular CLI like following.
Once we are done with creating angular 6 application we are going to create a new service called “MessageService” like following.
And following is the code I’ve written for printing a simple message.
Here in the above code, you can see that I have created a method called ‘printMessage’ and I am returning a simple observable of the string as a message. Please do notice that providerIn attribute in injector decorator.
Now let’s write some code in ‘app’ component to get the message from service. Following is a code I have written for that.
Here in the above code, You can see that I have injected the message service in the constructor of the component and then I have created a ‘printMessage’ method to get a message from our message service. Now let’s print this message in HTML part of app component like below.
Here you can see I have just printed a message via two curly braces. Now let’s run this application and with ng serve command and here is output in the browser as expected.
That’s it. Hope you like it. Stay tuned for more!!.
You can find complete source code this application on Github.com at – https://github.com/dotnetjalps/Angular6Providers