Angular 11 New Features

Introduction

With the new version of Angular 11, they are releasing many new features and a few old issue fixes. Exiting fixes are router, forms, and the localization string use outside the templates. This issue is fixed and available in Angular 11.

How to update to Angular version 11
Automatic Inlining of Fonts
Component Test Harnesses
Improved Reporting and Logging
Updated Language Service Preview
Updated Hot Module Replacement (HMR) Support
Faster Builds
Experimental webpack 5 Support
Linting
Housekeeping
Roadmap

How to update to Angular version 11

If we need to update Angular 10 or the old version needs to be updated to the latest version, Angular 11, please execute the below line in the command section:

ng update @angular/cli @angular/core

Automatic Inlining of Fonts

One of the new features introduces automatic font inlining in Angular 11, which means during compile time Angular CLI will download and inline fonts that are being used and linked in the application.

The inlining font is the default behavior in apps built with angular 11, so if you want to take and benefit from this advantage we need to do update our angular application to the angular 11 version.

Component Test Harnesses

In Angular 9 there was this component test harness that provided a readable and robust API based for testing Angular material components with the supported API at test. With this new version 11, we now have harnesses for all components, so even more test suites can now be built by developers.

Improved Reporting and Logging

The next one Angular 11 has a lot of improvements in the new CLI output to make logs and reports easier to read. You can see the logs and generated files. Please refer to the below images.

Updated Language Service Preview

Angular 11 makes development with Angular more productive. The Angular team has introduced the Angular Language Service, which provides helpful tools.

The previous Angular 10 versions of the language service are based on View Engine. From now on, we have a sneak peek of the Ivy-based language service. The updated language service provides a more powerful and accurate experience for developers in the Angular 11 version.

For example, now the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does.

Updated Hot Module Replacement (HMR) Support

In version 11 they’ve updated the CLI to allow enabling HMR when starting an application with ng serve. To run the following command:

ng serve --hmr

This will very helpful for developers working on the local server. For example, the developer has a large form and they filled it with some data. When they make a change in the code, what they have changed will be updated without any loss of the data in the form.

Faster Builds

The Angular 11 supported typescript version 4.0. Angular is one of the fastest frameworks. Angular 11 allows for faster development and building the application.

In Angular 11 when we install dependencies, the ngcc update process is now 2–4x faster and compilation is also faster in the updated version.

Experimental webpack 5 Support

Now webpack version 5 will let you make faster builds with continuousdisk caching and smaller bundles.

If we need to enable webpack our project, please add the following code to the package.json file:

"resolutions": {
"webpack": "5.4.0"
}

Currently, we need to test this, as npm does not yet support the resolutions property.

Linting

In Angular use, Linting is the process of running a program that analyses your code for programmatic and stylistic errors.

TSLint will no lower be a part of an angular framework, the angular team is encouraging migration to ESLint.

The open-source community developed a third-party solution and migration path via typescript-eslint, angular-eslint and tslint-to-eslint-config. The Linting supported the transition of Angular developers to the supported linting stack.

Housekeeping

In Angular 11 they have removed support for IE9/IE10 and IE mobile. IE11 is the only version of IE still supported by Angular. They’ve also removed APIs and added a few to the removed list. Be sure to check this out to make sure you are using the latest APIs and following our recommended best practices.

Roadmap

The Angular team has updated the roadmap to keep you posted on our current priorities. Some of the announcements in this post are updated on in-progress projects from the roadmap. This reflects our approach to incrementally roll out larger efforts and allows developers to provide early feedback that we can incorporate into the final release.

I hope this article is helpful!