Finally, Angular 9 is released! Here we will discuss major changes and what’s new for your current project which you need to look at.
There are only some under-the-hood changes which are mostly how Angular works and optimization during the bundle creation process.
Let’s check them all!
What’s New in Angular 9?
Ivy
Ivy is the Angular’s next-generation compilation and views rendering engine. It was added in Angular 8 as well but as an optional way to build production. But with Angular 9 it is the default engine that will work to optimize the production bundles to the next level.
How Ivy Works?
It takes all components or templates logic in a project to convert them into instructions which then ships and runs in the browser. So it is only related to how Angular works during bundling, so you don’t need to make any change How you write your code? there’s no change in API’s or syntax.
Why is it there?
Small Bundles: It makes the bundles significantly of smaller size using more optimized algorithms. This results in smaller project code packages for modular architecture in large applications. So users have a smaller code base to download for a project.
Better Performance: It also results in faster loading times when app startup as it also provides amazing runtime performance it makes applications more faster.
AOT instead of JIT Compilation
In Angular 8 Ahead Of Time compilation was optional where Just In Time was used by default. But in latest version 9 AOT is used as a default option to complie the project and create bundle files.
So the errors which were only visible during production on ng build –prod , now will be there even if if we run ng serve –open command.
Strict Templates
In the tsconfig.json file’s "angularCompilerOptions" object now have "strictTemplates" property which we can set to true.
This can strictly check templates as well for types we provide in input and output properties.
For example, if a component is expecting a string value in an input property then we can’t pass a number:
...
age:number = 25;
...In template
<app-age [age]="myAge" ></app-age>And in AppAgeComponent
...
@Input() age: string;
So the terminal will throw an error as expected age value is in the string but we are passing a number value.
Minor Changes & Deprecations
- Now the minimum version of supported Typescript is 3.7
- For dynamic components like for Modals, we used the entryComponents property in the previous version of Angular which is not required now.
You can check more details on some minor changes here.
ViewChild's second property Static False not required
In Angular 8 for @ViewChild and @ViewContent a new property was added {static: false} but now if we want to set it to false, there is no need to use it.
It is only required if we want to use the element before change detection i.e in ngOnInit() component hook.
How to update From Angular 8 to Angular 9?
To update your project run
$ ng updateit will return something like this:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cli 8.3.23 -> 9.0.1 ng update @angular/cli
@angular/core 8.2.14 -> 9.0.0 ng update @angular/core
rxjs 6.4.0 -> 6.5.4 ng update rxjsAfter that run following command in the terminal
$ ng update @angular/cli @angular/core rxjsThat's it now your Angular 8 is updated to v 9.0.0
