What's new in Angular 9?

web
mobile

Topic: What's new in Angular 9?
Published 09.03.2020 Updated 09.03.2020

Arkadiusz Idzikowski staff posted 1 months ago

Introduction

Angular 9 is here! This new major release is one of the biggest updates made in the past few years and it introduces new compiler called Ivy, which allow to build more efficient applications.

In this article we will learn about the main changes made in version 9. 

Angular 9 features

Angular 9 comes with many new features that significantly improve application efficiency and development speed and experience.

Here is a list of main advantages offered by the new version:

Ivy compiler

The Angular team has been working on the Ivy compiler/renderer for over two years now. Ivy is a complete rewrite of the Angular underlaying compiler and renderer. In previous version it was possible to opt-in to Ivy. Version 9 moves all applications to use this new compiler by default.

If you experience any problems with new compiler you can still opt-out of Ivy and fall back to View Engine.

Smaller bundle sizes

The parts of Angular framework that are not used in the application will be removed thanks to tree-shaking. Differences in bundle size will be most noticeable in small and large applications.

Testing speed improvements

Application test speed should be around 40%-50% faster thank to changes made in the implementation of Angular TestBed.

Better debugging

Ivy provides you with a new tools to debug your applications. Old ng.probe method has been replaced with a new ng object that, that can be used to debug the applications running in development mode. Ivy also improves the stack trace for debbuging errors. It's now easier to track where the error is being to thrown in generated code.

AOT compilation and build times

In previous Angular versions, AOT compilation was significantly slower than JIT compilation. That's why JIT was used for development and testing and AOT was used for production builds. Using different types of development and production builds meant that some problems might not be detected when creating the application.

Thanks to new Ivy's architecture, the Angular team could make significant improvements to the compiler's performance. With these improvements, AOT build can be used by default even for development. You also no longer need to add dynamic components to the entryComponents array, because these component will be automatically discovered and compiled by their usage.

Improved styling experience

In version 9 it's easier to reason about the styles order and precedence. The most specific styles always have the highest precedence.

Ivy also adds support for CSS Custom Properties binding:

<div [style.--element-background-color]="'#FFF'">Custom Properties binding works!</div>

Improved type checking

Angular Language Service now support additional checks in development mode. There are two main options for additional type checking:

- fullTemplateTypesCheck - compiler will check everything within the template

- strickTemplates - applies strict Type System rules for type checking. With this option activated the compiler will verify the types of property bindings, check the types of template context variables and template references to the directives and components.To enable this option, add following setting to the tsconfig.json file:

"angularCompilerOptions": {
"strickTemplates": true
}

MDB and Angular 9

MDB Angular 9 now fully supports Angular 9. Read our changelog to learn more about the changes in the MDB library.

We also prepared migration guide to help you upgrade your project.

Write
Please insert min. 20 characters.