Angular Version 8 was just got released and as usual we heard lot of people talking about “I just started learning with angular 7 and now it is angular 8, now I have to restart and learn angular 8 and some of them are already suggesting not start with angular 8 instead wait till September and start learning with angular 9.”, it makes me surprised have you guys ever heard people talking about version number of java or c#. I think we even don’t care about it. The same with angular. Angular 8, 9 … are just version numbering, with some under the hood changes and updates which we as a developer should not care about. And if you want to update your existing angular application to angular 8 you are just a command away.
ng update @angular/cli @angular/core --next
Anyway, let me talk about the new updates with angular version 8. According to me, we can classify changes of angular version 8.x in two different categories,
- Breaking Changes
- Experimental Changes (new updates)
Starting with the Breaking Changes,
Breaking Changes
@angular/http is no longer supported
With the release of version 8 angular stops support for @angular/http. They already had deprecated @angular/http since they had released the angular version 4 and provided more efficient and secure way of making a http call and i.e. using @angular/common/http. So if you are still using @angular/http in your application that is perfectly fine till angular version 7. They had removed support from version 8 and onwards. So if you are planning to upgrade your application to angular 8 or so then you just need to make adjustment to @angular/common/http instead of @angular/http. It is not a much pain because it was deprecated already from version 4.
@ViewChild and @ContentChild
In order to use @ViewChild and @ContentChild with angular version 8 project, we just need to pass one additional argument, whether it is static or not.
Below is the example,
Earlier,
- @ViewChild(‘input1’) demoInput:ElementRef;
And we can use it like,
- Demo(){
- Console.log(this.demoInput.nativeElement.value);
- }
Now,
- @ViewChild(‘input1’,{ static : false }) demoInput:ElementRef;
And we can use it like,
- Demo(){
- Console.log(this.demoInput.nativeElement.value);
- }
We can set the value of static to true or false, depending on the use case. If you want to access the value on ngOnInit set the value to true, and if you want to access the value after ngAfterViewInit set the value to false. You can read more about it
here,
Note
ViewChildren and ContentChildren will work as it is.
So this are the breaking changes according to me with angular version 8. Now let’s talk about some new changes,
New Updates
Ivy
Ivy is the most important feature to release in angular version 8. Although it is not ready for production but you can work around with it for testing. Ivy is the new rendering engine for angular, which drastically shrink the bundle size. You can use Ivy renderer to angular application via just setting a flag - -enable-ivy , you can read more about it
here. And as developer, we even don’t care about it because your code doesn’t change at all.
Bazel
Angular had added the experimental support for bazel. Bazel is a build tool which was used by Google and now it is an open source, which do the build process to optimize overall build flow and speed but again not fully finished yet, still you can
enable it to play around with it.
You can read more about it
here.
Differential Loading
It is the process by which browser choose between modern and legacy JavaScript based on its capacity to deliver. CLI automatically creates multiple production bundle for modern and legacy browser. And modern browser bundle will always smaller because it can use all the new feature of JavaScript without converting it to ec5. Additionally, your Pollyfills also shirks. So whenever user visits your application a small script will automatically detect the browser and based on that build will be selected. We don’t need to configure anything. Bundle size may decreases to 7-20 % without changing your code.
Here is the demo of production build generated using angular version 7.x.
Now the build using angular version 8, which will generate two builds one for legacy JavaScript and one for modern browser.
Now, as you can see it has generated two builds, and you can see the size of second build and size of main.js and polyfills.js are shrunk.
Route Configuration (Dynamic Imports)
It is always recommended that we will use lazy loading in our application as much as possible because it will also help in optimizing the performance of our angular application. And this can be achieved by using loadChildren in our route configuration file as shown below.
Earlier,
- {path: ‘/products’, loadChildren: ‘ ./products/products.module#ProductsModule‘}
Now it will look like below,
- {path: ‘/products’, loadChildren: () = > import(‘ ./products/products.module’).then(x = > x. ProductsModule ) }