Angular 9.1 Now Available

We just released Version 9.1 of Angular. This is a minor release of the framework and the CLI that is a drop-in replacement for 9.0 containing new features and bug fixes.

Build Speed Improvements

Today, the Angular libraries you use are made compatible with the Ivy compiler via our ngcc tool. Previously, the ngcc compilation pass covered all of your Angular library dependencies sequentially. In 9.1, we’ve improved the speed of ngcc, and allowed it to compile multiple packages concurrently.

These changes will help make builds faster and improve reliability for teams with monorepository-style workspace layouts.

TypeScript 3.8

We’ve 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 `displayBlock`

Angular components are displayed [inline](https://developer.mozilla.org/en-US/docs/Web/CSS/display) by default, as that’s the default for most DOM elements. It’s very common for developers to want components to use the display: block style. When you create a new component, you 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 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, we now pass the grep and invertGrep options to the Protractor builder, allowing you to more easily choose the test you want to run.

ng e2e --grep searchTerm

Improved HTML & Expression Syntax Highlighting

If you use VSCode and our 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 9 Tutorial

Note: We 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
  }

This was a community contribution, so a huge thank you to Ephraim Khantsis.

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, you can opt-in via

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

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

Other Changes

This release includes lots of other bug fixes, performance improvements, and minor features. Version 9.1 also improves the compatibility story with our new compiler and runtime. If you previously attempted to enable Ivy with version 9.0 and ran into issues, try again with version 9.1.

See the full list of recent changes in our framework changelog, CLI changelog, and components changelog.

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

What’s Next?

This is the last planned minor release for 9.x. As we start work towards 10.0, you should expect to see 10.0 prereleases usually once per week, even though they will contain only minimal changes at first.

#angular #typescript #web-development #javascript