Angular Version 8? What’s New? Breaking Changes? Updates? And many more!
Hello Everyone,
Angular Version 8 is just released and as usual we heard lots of people talking about “I have 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 suggesting not to start with angular 8 instead wait till September and start learning with angular 9.”, It makes me surprise, 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 is 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 introduced to new updates with angular version 8. According to me we can classify changes of angular version 8.x in two different categories,
1. Breaking Changes
2. Experimental Changes (new updates)
Starting with the Breaking Changes,
· Breaking Changes
1. @angular/http is no longer supported
with the release of version 8 angular stops support for @angular/http and by the way 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 find 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 must 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.
2. @ViewChild and @ContentChild
In order to use @ViewChild and @ContentChild with angular version 8 project, we just need to pass one additional argument weathered 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
1. Ivy
Ivy is the most important feature in release of 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.
2. 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.
3. 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 a smaller because it can use all the new feature of JavaScript without converting it to ec5. Additionally your Pollyfills also shirks. So when ever user visit your application a small script will automatically detects the browser and base 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 are 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 if you can see the size of second build and size of main.js and polyfills.js are shrink.
4. 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 ) }
