Angular is an open-source front-end framework developed by google which is a complete rewrite of Angular JS. To know more about Angular, you can visit angular.io. The angular has been evolved a lot and angular 9 is one of the major releases which contains a lot of improvements.
One of the major improvements is that they have built a new rendering engine called Ivy which makes Angular smarter and faster. Previously we had View Engine as the rendering engine but it has been replaced with Ivy. In this blog, we are going to explore the interesting features that are included in Angular 9.
Angular 9 Features
Ivy
Ivy is the new rendering engine for Angular. In the previous versions, you need to opt-in for Ivy but from Angular 9 it’s enabled by default. Previously we had View Engine to compile and transpile the components, which was not performing well than Ivy.
It uses AOT Compilation which compiles your app at build time. And also the libraries which you use in your respective application can be AOT Compiled, but this is not recommended by the Angular team. They have a View Engine – Ivy Migration plan which recommends only publishing JIT Compiled View Engine – Compatible Libraries for Angular 9.
If you face any issues by using Ivy, you can fallback to View Engine by setting the enableIvy flag to false.
tsconfig.json
{ "angularCompilerOptions": { "enableIvy": false } }
Bundle Size
Ivy reduces our bundle size which increases the performance of our angular application since it uses Ivy Instruction Set which is a set of tree-shakeable runtime rendering instructions. However, the difference between bundle sizes will be based on the size and also the third party libraries which are being used in our angular application.
- Smaller apps can perform better because of the tree shaking capability.
- Medium Apps should see some small size reduction in their bundle size.
- Large Enterprise apps with many components benefit by tree shaking capability.
Debugging Improvements
Ivy enables us to debug our application more efficiently. In Dev Mode, they offer the new ng object for debugging. The improvements also include,
- Manually call methods and update the state
- Able to access components, directives and much more
- You can trigger the change detection using the ng object.
And also the stack trace for debugging issues has been improved. Previously the stack trace would not be clear enough, but now the Ivy throws you the stack trace where you can find the exact cause of the issue.
Improved Style Binding
The Ivy compiler comes up with a set of improvements for handling the styles. In previous versions, if there are more definitions for a style, the definition which gets loaded at the last will be applied. But now, it overrides based upon the order definition. For example,
<div style=”color:red” [style.color]=”yellow” [style]=”{color: blue}”></div>
In the above example, whichever the color definition loads last, it will be applied to the respective element. But now, the order will be maintained and the most specific styles have the highest order precedence. The style will be replaced by [style.color]. The behavior of [ngStyle] and [ngClass] bindings will be the same as before.
As a part of this, Ivy now supports binding CSS Custom Properties.
<div [style.–border-color]=”#FFFF”></div>
Improved Type Checking & Build Errors
Now the angular compiler can check more of the types in your application and also it has some strict rules that can be applied. Basically it consists of two flags for additional type checks.
- fullTemplateTypeCheck – If you activate this flag the compiler checks everything within your template.
- strictTemplates – If you activate this flag, the compiler will apply the strictest type system rules for type checking.
These improved type checking will be very helpful to find bugs at ease.
And also Ivy compiler makes all of the build error messages easier to read which allows us to find out the exact cause for it.
Improvements to Differential Loading
Differential Loading was introduced in Angular 8. While building your respective application, the build process will run once for ES2015 bundle and once for ES2015+ bundle.
But now, while building the application, the output will be a single ES2015+ bundle. This respective bundle will be transpiled to the respective ES2015 bundle. By doing this, the build process will be run only once.
Improved Developer Experience
There’s an extension called Angular Language Service which you can install in Visual Studio Code. This will be very helpful to increase your productivity. So Ivy enables it to support additional checks while developing our application.
- File path Checks – Verifies the component stylesheet and template paths
- Template type Checks – The type checking will be taken care of while developing and building your application.
TypeScript Version Support
TypeScript Version 3.6 and 3.7 supports Angular 9. Some of the major things covered in 3.7 release are,
- Optional Chaining Operator(?.)
- Null coalescing operator (??)
- Assertion Functions
- Top-level Await
- Improved recursive type aliases
Bazel Release
Bazel is a build automation tool for your angular application. The stable version of Bazel is 2.1. It’s an opt-in tool if you choose angular 9. To enable Bazel in your application execute the below command,
ng add @angular/bazel
And also make sure to follow this documentation to install Bazel in your respective machine.
Angular Components
Angular 9 comes up with two new interesting components, YouTube player and Google Maps. And also it allows you to,
- Easily render the YouTube Player component inline in your application.
- And also Google Maps component allows you to render Google Maps, display markers and combines with other components at ease.
Conclusion
Apart from this, there were some improvements done in Angular Material and also the testing of our angular application has been made faster. As you see there were a lot of improvements made in Angular 9 and congrats to the whole team, for making angular a better framework.
Waiting for Angular 10! Who else?
Happy Coding!
Cheers! 🙂
