A Quick Guide to know what’s new in Angular 9

Our world is ever-advancing and to keep up with its pace, the Angular community is always dedicated to provide new features. This makes sure your applications are not left behind. On the 7th of February 2020, Angular released a marvelous new version of Angular i.e Angular 9. So, if you are an Angular enthusiast and are keen to know what Angular 9 offers, then this article on “What’s New in Angular 9” will definitely help you quench your thirst.

Before moving on, take a look at all that has been discussed over here:

• Understanding Angular Versioning
• Update Paths
• Versions Supported
• What is new in Angular 9?
  • Angular9 Ivy
  • Benefits of using Ivy
  • AOT and Ivy
  • Ivy and Libraries
  • What is AOT?
  • What is the difference between AOT and JIT?
  • Working of AOT?
  • Phases of Compilation  

Understanding Angular Versioning

Angular version refers to the level of changes that are proposed by the release which actually helps users understand what happens when they upgrade to the new version. The version numbers that you see in Angular have three parts i.e major.minor.patch.

The major releases usually contain a notable number of new features whereas minor release introduces smaller new features and they are completely backward compatible. Patch releases are most often bug fixes that have very low risk.

Update Paths

Angular update paths depend on two factors i.e if you are updating within the same major release or from one major release to another.

• While updating within the same major release, intermediate releases can be omitted and you can directly upgrade to the latest minor release
• While upgrading from one major release to another, Angular recommends you do not skip any intermediate major releases

Versions Supported

Versions 4x, 5x and 6x are no longer supported. However, Angular 7x will be supported until the 18th of April 2020 whereas version 8x will have support until 20 November 2020.

What is new in Angular 9?

Angular 9 has a number of new changes which are:

• Compilation of applications with Ivy is a default in Angular 9
• Your Angular application is compiled Ahead-of-Time (AOT). This means the Angular’s AOT compiler will compile all the HTML and TypeScript present in your code into JavaScript before your browser downloads and runs it. This conversion takes place during the build process itself and it also includes type-checking
• Angular 9 requires TypeScript 3.7. Any lower versions are not supported
• tslib or the TypeScript runtime library has now been made a peer dependency rather than a direct one. Earlier, this library would be installed automatically but now, you will have to explicitly add this using npm or yarn

Angular 9 Ivy

Angular 9’s compiling and rendering engine is known as Ivy. The older versions of Angular made use of View Engine. The bundle size produced by the View Engine is very large but with Ivy, this bundle has considerably reduced thereby helping Angular overcome its bundle issues.

For example, the simplest Hello World program was about 36Kb which is quite a large bundle size for a simple Hello World program. So, the Angular team decided that they will keep a threshold value of 10Kb. This was called the cake threshold because the head of that team decided to give the team all the cake in case they reduce the bundle size to below 10Kb. The team was successful in reducing the bundle size incredibly to just 7.3Kb with the minified Ivy version and something even better i.e 2.7Kb with the Ivy Compressed version. This was indeed a great achievement and they did deserve all the cake!

Benefits of Using Ivy

• Smaller bundle size
• Very helpful when it comes to debugging
• Brings faster compilation

Check out the Angular Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

Find out our Flutter Course in Top Cities

How does Ivy produce Smaller Bundle Size?

To understand how Ivy reduces the bundle size, you will first need to understand how the View Engine works. When you compile any of your components using the View Engine, say for instance example.component, you basically get two JavaScript files. They are the example.component.js file which consists of the compiled TypeScript code and example.component.ngfactory.js file which is a static representation of the template code. So here, there will be a mapping of these two files which consumes a much longer build time.

So, the Angular team decided that the second file, i.e the .ngfactory.js file, can be removed by just adding the template code within the JavaScript code itself. The Ivy makes use of function calls rather than iterating over each element as in the View Engine.

Helpful in Debugging

With Angular 9, you will not have to debug through the framework, but rather, you can do it on the component itself which helps you debug your code instantly.

Faster Compilation

Earlier, when you would make use of the ng build command, the whole application gets recompiled. This was because the Angular components were aware of all the dependencies of themselves.

For example, if your application has a component that contains *ngIf then, the component would also know what this *ngIf needs in order to compile it. So in case, you make changes to any of the *ngIf dependencies, all components that contain this *ngIf need to be recompiled. As a result, the team came up with an idea of the Locality Principle which brought forth single file compilation. The components that contain *ngIf don’t actually need to know its dependencies. So in this case, if some component is recompiled, nothing else will be needed to recompile putting an end to global recompilation. The Ivy calls the constructor of the *ngIf which knows the exact dependencies of it.

AOT and Ivy

AOT along with Ivy speeds up the creation of applications. To activate AOT for your project, open the angular.json file and set aot to true.

Ivy and Libraries

You can build Ivy applications with libraries of the View Engine compiler using ngcc or the Angular compatibility compiler. To build your applications efficiently, you will have to run ngcc after every installation of third-party packages. In order to do this, insert the script in the package.json file as follows:

Each time you install a new module, the postinstall script will be executed.

NOTE: In case you are installing multiple libraries in a row, postinstall can be slower than allowing the Angular CLI to run ngcc on builds.

What is AOT?

As mentioned earlier, the Angular AOT compiler compiles your code’s HTML and TypeScript into JavaScript before the browser downloads and executes it. Here are a few reasons why you must use the AOT compiler:

• When you use AOT, the rendering becomes faster. This is because the browser can download a pre-compiled version of your project and load the executable code. This helps the application to render instantly, without it having to compile the code first.
• The AOT compiler will inline all the external HTML and CSS within the applications JavaScript which in turn eliminates discrete ajax requests for these source files.
• When applications are already compiled, there is no need to download the Angular compiler. This helps in reducing the size of the Angular framework being downloaded as the compiler is half the size of Angular itself.
• Angular’s AOT compiler will help you find template errors during the build process itself.
• Reduction in injection attacks as the HTML templates are pre-compiled into JavaScript before they are rendered on the client-side thereby providing better security.

What is the Difference between JIT and AOT?

• AOT loads the application much faster than the JIT compiler because JIT compiles the application at runtime.
• AOT does not have to download the compiler at all, unlike the JIT compiler.
• The bundle size produced by JIT will be much larger as it contains the compiler code as well.
• In case of AOT, the template binding errors can be detected during the build time itself unlike JIT where the template errors are discovered at the time when the application is displayed.

Using AOT

When you use ng serve or ng build, the JIT compiler will come into action. To use the AOT compiler, you can use the same commands with the –aot extension as follows:

• ng serve –aot          //to build and serve
• ng build –aot          //to build

Working of AOT

AOT interprets the application by making use of the metadata which is specified within the @Component, the @Input decorators or within the constructors. The AOT compiler will take all the metadata and then, it will generate a factory for it. For example, if you have a component as follows:

Angular’s AOT compiler will extract all the metadata of DashboardComponent once and will then create a factory. Whenever an instance of this class is to be created, the AOT compiler will call the factory that will produce a visual element. This will be bound to a new instance of the target component class with its injected dependency.

Phases of Compilation

Applications are compiled in three stages by the AOT compiler:

1. Code Analysis
   In this phase, the AOT collector will collect the metadata, analyzes the syntax and represents it in the best possible manner. Any error in the metadata syntax will be recorded and there will be no metadata interpretation
2. Code Generation
   Here, the collected metadata will be interpreted by the compiler’s StaticReflector and will also check for metadata validation once again. If there are any violations, an error will be thrown

3. Template Type Checking
   This is an optional phase where the Angulars’ template compiler utilizes the TypeScript compiler so as to check the validation of binding expressions in templates. If you wish to enable this, you can set the fullTemplateTypeCheck configuration option to true as shown below:

   

If you are looking for an Angular update, check out the following link:

Angular Update Path

This brings us to the end of  “What’s new in Angular 9” blog. I hope this blog was informative and added value to you. I would recommend you to go through this Angular 8 Tutorial Edureka video to watch the video and learn how to create an Angular application from scratch.

Discover the power of Flutter and learn how to leverage its features in a Flutter Development Course.