Angular JavaScript framework launched for the first time in 2009, the latest version of AngularJS is Angular 9 and it is launched on February 6th, 2020. Angular is one of the best and most popular frameworks and widely used for developing front-end desktop web applications or single-page applications by Angular JS Development Company.
Furthermore, Angular is the first choice for the front-end development for developers across the world. The new version of Angular is released every six months. In this blog, we shall overview the new features of version 9.
Angular 9: Features
- Default Ivy Compiler
- Smaller Bundle Size
- Better Debugging
- Faster Compilation
- Ahead-of-time (AOT)
- Angular 9 requires Typescript 3.7
So let’s have a look at the new things Angular 9 brought us and there is one big and a main new feature in angular 9 is Ivy.
Ivy
lvy is the code name for angular’s next-generation compilation and rendering pipeline. Angular 9’s compiling and rendering engine is known as Ivy. Application build with IVY is more efficient. The new version of Angular use View Engine and View Engine produced a large size bundle. But with the help of lvy this bundle has considerably reduced thereby helping Angular overcome its bundle issues.
Smaller bundle size
In the new feature, the bundle sizes are decrees by 30 to 40 percent based on the app size. When you compile any component using view engine in Angular JS, for example, home. component, you get two JavaScript files. The first one is example.component.js which consists of the compiled typescript code and example.component.ngfactory.js file which is a static representation of the template code. That is why here, mapping of these two files which consume a much longer build time. Angular team decided that the second file which is .ngfactory.js file be removed by just adding the template code within the JavaScript code itself. Ivy makes use of function calls rather than iterating over each element as in the View Engine.
Better Debugging
Debugging is one of the features of Ivy compiler and runtime. It is difficult to develop a program that is completely bug-free. Developers will not need to be debugged through the framework; they can do it on the component itself which helps you debug your code quickly.
Faster Compilation
Earlier, when you run ng build command the whole application gets recompiled. Because the Angular components are aware of all the dependencies of themselves.
For example, component contain *ngIf then the component would also know what this *ngIf in order to compile it. If you make changes to any of the dependencies then all component that contain this *ngIf needs to be recompiled. The team came up with an idea with locality principle which brought forth single file compilation.components that contain *ngIf don’t need to know dependencies. In this case, some component is recompiled, nothing else needed to recompile. Ivy calls the constructor of the *ngIf which knows the exact dependencies of it.
AOT and Ivy
AOT along with lvy speed up the creation of an application to active AOT in your application. Open angular.json file and set aot : true.
“options ”: {
“outputPath”: “dist/project”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tscongif”: “tsconfig.app.json”,
“aot”: true,
If you like to build your application efficiently, then you will have to run ngcc after every installation of third party packages. To do this, insert the below script in the package.json file.
“name”: “project”
“version”: “0.0.0”,
“scripts”: {
“postinstall”: “rgcc --properties es2015 browser module main --first-only
--create-ivy-entry-points”,
“ng”: “ng”,
The script is executed each time when you will install a new module.
What is AOT?
As mentioned earlier, the Angular AOT compiler compiles your HTML and Typescript into JavaScript before the browser downloads and executes it.
When you use ng serve or ng build then JIT compiler will come into action. To use Aot compiler the follows:
ng serve -aot //to build and serve
ng build -aot //to build
How to update the Angular version 9 from Angular 8
First, update to the latest version of 8
ng update @angular/cli@8 @angular/core@8
Then, update to 9
ng update @angular/cli @angular/core
The main goal of Angular 9 is to make it available for all applications. The main benefits of Ivy is to reduce the size of applications for better user experience.
Mobio Solutions is a Business technology Solutions company who will guide you with strategic advice on the technology that fits best to your business solution. You can contact and get a 1 week free consultation service from the best technocrat of the team.
