Angular Version 9.1 Is Now Available – Faster Builds, Typescript 3.8 and more.

Posted by Mukesh Singh on

Learn CSS and HTML at CodingGram

Version 9.1 of Angular released almost a month back. It is the minor release of the angular framework and CLI that is a drop-in replacement of Angular 9.0 with new features and bug fixes.

Improvements In Build Speed

Currently, the Angular libraries we are use are made compatible with the Ivy compiler via ngcc tool. Previously, the ngcc compilation pass covered all of our Angular library dependencies sequentially. In Angular 9.1,  the speed of ngcc is improved and multiple packages can be compiled concurrently.

These changes are resulting in faster builds and improve reliability for teams with monorepository-style workspace layouts.

TypeScript 3.8

Angular 9.1  added support for TypeScript 3.8, in addition to our existing support for 3.6 and 3.7.

This release adds many great features to the TypeScript language, including:

  • Type-Only Imports and Exports
  • ECMAScript Private Fields
  • Top level await

New CLI Component Generator Option

Angular components are displayed inline by default, as it is the default for most of the DOM elements. It is common that developers want components to use the display:block style. Whenever we create new component, we can now set this up automatically.

ng generate component my-component --displayBlock

To turn this on by default, set the schematics.@schematics/angular:component.displayBlock key in 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, we now pass the grep and invertGrep options to the Protractor builder, allowing us to more easily choose the test we want to run.

ng e2e --grep searchTerm

Improved HTML and Expression Syntax Highlighting

If you use VSCode and angular Language Service Extension, starting today our extension will allow your IDE to syntax highlight expressions in your templates, using a TypeScript-like formatter. It will also add syntax highlighting to your inline HTML templates in your components.

Angular team worked with the authors of angular2-inline and vscode-angular-html on these features. If you use either of these extensions, you’ll need to disable them for this functionality to work.

Directionality Query API

If you build an application with Internationalization, you may be building a single app that supports Right to Left locales. You can now query for the current direction at runtime.

import { getLocaleDirection, registerLocaleData } from '@angular/common';
import { LOCALE_ID } from '@angular/core';
import localeAr from '@angular/common/locales/ar';

...

  constructor(@Inject(LOCALE_ID) locale) {
    
    getLocaleDirection(locale); // 'rtl' or 'ltr' based on the current locale
    registerLocaleData(localeAr, 'ar-ae');  
    getLocaleDirection('ar-ae'); // 'rtl'

    // Now use the current direction in your app.
    // You can conditionally specify an image URL for example
  }

TSLint 6.1 by default

Newly created projects will now use TSLint 6.1 by default. If you want to migrate to the latest version, make sure you are on version 9.1 first, then you can opt-in via:

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

Angular do not run this migration automatically because there are some minor breaking changes in TSLint 6.1.

How to Update

Update to the latest version of Angular to get access to these new capabilities and bug fixes.

ng update @angular/cli @angular/core