Angular 9.1 Out: New Features, Changes And More To Discover

At a glance: Angular Features

• Typescript 3.8
• Improved Build Speed
• CLI Component Generator Option
• Enhanced HTML and expression syntax
• TSLint 6.1 by default
• Support for Grep and invert Grep

Angular Compatibility Compiler Improvements (ngcc)

Before version 9.1 came by, the ngcc compilation involved all of the Angular library dependencies. However, today the Angular libraries get along well with the Ivy compiler with inputs from the ngcc tool. With this, the speed of the ngcc has improved while allowing the compilation of multiple packages. Angular dev teams wanting to focus on mongorepository-styled workspace layout can benefit from the improved build speed too.

ECMAScript private fields

• # triggers the Private Fields
• TypeScript Modifiers follows ‘hard privacy’

Top Level await

• await” function performs at the top of the module.
• Previously “await” needed support from ‘async’ function.

Type-only imports and exports

• Type annotations and type declarations use new command import as prompted by this new feature
• Type contexts need the export type
• TypeScript erases both remnants at runtime

Convert to template string

Also Read : [Xamarin Development- How does it get you more with enterprise app development?]

New CLI Component Generator Option

Display Block is a new upgrade to the CLI Component Generator Option. Initially most DOM elements received that component as “inline” by default. Now on, all angular developers use components displayed as display:block style automatically as they create a new component. The command appears as below,

generate component my-component –display Block

First set the key in your angular.json to true

schematics.@schematics/angular:component.displayBlock

However, you can also use the following command,

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

Modified version of End-to-End tests

While testing end-to-end processes, you can use grep and invert Grep options in the Protractor builder. This extends the flexibility while choosing a test type.

e2e –grep searchTerm

TSLint 6.1 by default

To be able to understand TypeScript functionality and readability errors, you can use TSLint 6.1 analysis tool. As you use the latest version of the tool, you must ensure, you are using the Angular 9.1 version. Use it using the following command.

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

Ivy Compiler Upgrades

strictTemplates option is a new upgrade in Angular 9.1 version for Ivy compiler. It can be leveraged to do short and fast testing. In case, if Ivy has strict interventions, developers can use strict Literal Types to ease the checks.

Improved HTML & Expression Syntax Highlighting

Angular experts can make use of a TypeScript-like format. As you use IDE or VSCode and Language service extension, the format helps you syntax highlighting expressions in the templates. The Syntax highlighting can also be added to the inline HTML templates.

Directionality Query API

The compatibility with Right to Left locales is important as you build a single app with internationalization. It is now easier to make queries at runtime for the current direction.

Some more changes to Angular 9.1

• Compatible with new compiler and runtime
• Enhanced performance
• Bug fixes

Ways to get the latest features

Use the following command to implement the newer version of Angular and get the best features and bug fixes.

update @angular/cli @angular/core

Summing up

These are all the latest features and improvements meant to transform the Angular development and also frontend development. Angular 9.1 also has a better compatibility rate with the new compiler and runtime. Bytes Technolab passionately follows all changes in the frontend development and brings the best of technology engineering to website and application development.