Blog

  • Home / Angular / What Are The New Features In Angular 9.1

What Are The New Features In Angular 9.1

  • April 29, 2020


In this version, we see The Ivy compilation and rendering pipeline receiving attention as well. This is the third release candidate before moving towards Angular 10. Developers around the globe have always prioritized Angular for front end development. The Angular 9.1 might be a small release as far as features are concerned, but a big release in terms of bug- fixes and improvements which is highly beneficial for the Angular development companies around the world. So let’s see what’s new in Angular 9.1.

Build Speed Improvements( ngcc improvements)

The ngcc compilation, initially, used to cover all of the Angular library dependencies sequentially. With this new version, The speed of the ngcc has improved, allowing multiple packages to compile concurrently. These Changes will help to make the builds faster, improving the reliability for the teams dealing with the mono-repository workout space.

TypeScript 3.8

This release candidate features the typescript version 3.8, launched on January 10th, 2020. The new version of angular supports typescript 3.8 in addition to our existing support for 3.6 and 3.7. Along with the list of new features, the main features of typescript 3.8 that stand out are its:

  1. ECMAScript private fields- Private fields start with #, TypeScript availability modifiers cannot be recognized outside of the containing class. This is called “hard privacy.”
  2. Type-only imports and exports- This feature prompt the new command import type imports declarations, using it only for type annotations and declarations, on the other hand the export provided by export type ar to be used only for type contexts. Either Way, both are always fully erased from the TypeScript output and leave no remnant at runtime.
  3. Top-level await.- This feature allows the ‘await’, function to be used at the top level of a module. Initially, it was done only with the help of an ‘async’ function within the body.

async function main() {
    const response = await fetch("...");
    const greeting = await response.text();
    console.log(greeting);
}
main()
    .catch(e => console.error(e))


Other features include:

convert to template string
call hierarchy

New CLI Component Generator Option

The CLI component generator option “displayBlock” is the new update in this version.

This new update allows the developers to use the display: block style automatically, whenever they want to create new components

ng generate component by-component –displayBlock

To turn this on,

schematics.@schematics angular:component.displayblock


key in your angular.json to true

or use:

ng config schematics.@schematics/angular:component.displayBlock true


End-to-End tests now support grep and invertGrep

When running end-to-end tests, the grep and invertGrep options are now passed to the Protractor builder.

 

ng e2e --grep searchTerm


Newly created projects now use TSLint 6.1 by Default

TSLint is an analysis tool that helps to check the TypeScript code for readability, maintainability, and functionality errors.

If one wants to migrate to the latest version, they will have to make sure that they are you are on version 9.1 first, then they can opt-in via:

ng update @angular/cli --migrate-only tslint-version-6


This migration cannot be run automatically because there are some minor breaking changes in TSLint 6.1.

Ivy compatibility fixes(template compiler)

The Ivy compiler introduced a new strictTemplates option in Angular 9.1. This is a shortcut to carry out a number of checks, that can be individually enabled/disabled. A new option has been introduced called strictLiteralTypes to relax the check on the templates wherever the Ivy is stricter and infers their proper type by default.

Improved HTML & Expression Syntax Highlighting

The VSCode and the Language Service Extension, is going to allow the IDE to syntax highlight expressions in the templates, using a TypeScript-like formatter. Furthermore, it also adds syntax highlighting to the inline HTML templates of the components.

Directionality Query API

In this version, the i18n supports RTL locale info. The utility function getLocaleDirection offered by the @angular/common package which helps to retrieve the information in your application. The locale data now contains the writing direction of the locale (‘rtl’ or ‘ltr’). One can now ask for the current direction at runtime.

Improving Scroll Performance with Passive Event Listeners

The passive event listeners are tools that help boost the scroll performance. They are very handy when it comes to an event that happens very often, like scrolling on mouse movements. It instructs the browser that it can proceed with scrolling without waiting for the listener function to return. Angular does not have such syntax for any passive events in an application. However, with Angular 9.1, zone.js now offers a global variable to configure it.

How to Update

Update to the latest version will get you access to these new features and make sure you can have all these new features and bug fixes in your project.

To update:

ng update @angular/cli @angular/core


Conclusion

This release comes with lots of other bug fixes, performance improvements, and minor changes in the features. Angular 9.1 also proves to have good compatibility with the new compiler and runtime.

metacoder.ai