What's New Features in Angular 9.1

    Thursday, April 2, 20206 min read6819 views
    What's New Features in Angular 9.1

    In February Angular launched its version 9 which has paved the way for Angular 10. The rise in popularity has led Angular developers around the world to upgrade the existing version. With this, Angular 9.1 has just been released, promising some of the minor updates from version 9. This minor release focuses on the framework and command-line interface (CLI) replacements with few other minor changes in the features and a long list of bug fixes for more stability in the angular framework.

    Angular 9.1 Features

    Angular 9.1 Features

    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)

    Angular Libraries were created with the View Engine compiler. The compatibility was provided to them by a tool named ngcc which is run by CLI commands while performing an Angular build. 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.

    Also Check out our article : Top 10 New Features of Angular 9 & Ivy 

    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:

    • ECMAScript private fields- Private fields start with #, TypeScript availability modifiers cannot be recognized outside of the containing class. This is called “hard privacy.”
    • 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.
    • 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. It initially displayed “ inline” which was supported by Angular components by default.

    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, which allows you to easily pitch the test you want to run.

    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. If an application is built with internationalization, it may be building a single application that supports Right to Left locales which contain the writing direction of the locale (‘rtl’ or ‘ltr’). 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. Hereafter, all the scroll event listeners declared in the application can be configured to be passive.

    hire angular developers


    MessagePort

    The Zone.js API in this new version can now handle the Channel Message. the callback can now automatically run by listening to the messages in your Angular application. You can also disable it, like every zone module, in the document.

    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 is ideally the last planned release for version 9. 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. 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.

    Also Check out our Article : Comparison Between Angular 6 vs Angular 7 vs Angular 8 vs Angular 9

    24

    Related articles

    This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.