Angular 11 – Everything You Need to Know

Angular version 11 is here and it has brought some great updates for the developers. From the framework to the components and CLI – everything is updated. The Angular team tries to bring some major changes with each update. For instance, iVY was released in Angular 9, support for Typescript 3.8 was provided in Angular 9.1, and modifications in the Angular Material UI component library was put forth in Angular 10. Today, we will explore the features of Angular 11. Let’s dive in then.

Angular 11 – Features & Updates

The highlight of this version is stricter types, automatic inlining of fonts and router performance improvements. The default automatic font inlining will be enabled for the apps that are updated. The improved router performance ensures that the applications are made faster. Apart from these, there’s more to Angular 11 which we will list below.

#Component Test Harnesses

In Angular version 9, the community introduced Component Test Harnesses. These provided a robust API surface to assist in testing Angular Material components. It allows the developer to interact with the components using the supported API.

In version 11, a component harness is available for each component. It comes with lots of performance improvements, updates and even new APIs. Now, the parallel function makes it easy to deal with async actions inside the tests as the developers can run multiple async interactions with the components in parallel. For instance, a function of manual change detection will give access to better control of detection simply by disabling auto change detections inside the unit tests.

#Updated Hot Module Replacement Support

Hot Module Replacement or HMR is a mechanism that allows a replacement of the modules without refreshing a full browser. This is an old concept but Angular 11 adds more to it.

Angular 11 offers support for HMR with required code changes and configurations. It allows the CLI to enable HMR while initiating an app with ng serve. The following command is required to get started with:

ng serve –hmr

Thus, the CLI command significantly reduces the amount of effort required to configure the HMR. Once the developers insert this command, the console will display a message as soon as the local server confirms that HMR is active.

During development, the latest changes to templates, styles and components will be automatically updated into the running application. It doesn’t require a full page refresh, which in turn, boosts the developers’ productivity.

#Updated Language Service Preview

The Angular Language Service offers various helpful tools that according to the professionals at any website development company, ensure hassle-free web development. The updated language service will provide a more accurate experience to the developers. They can check a preview of how things will work with a better renderer and view engine. The language service will be able to properly infer generic types in templates just as the TypeScript compiler does.

#Automatic Inlining of Fonts

Angular 11 offers automatic font inlining that helps to convert Google icons and fonts to inline in the index HTML. During compiling, the Angular CLI will download and consequently embed the inline fonts that are linked and used in the application. These are enabled by default for configuration.

This is made default in the applications built with version 11. Therefore, in order to leverage the advantage of this optimization, the developers have to update the app first.

#Webpack 5 Support

Webpack is used for compiling lots of files into a single small file or bundle. Its latest version – Webpack 5 is released a few months back.

Angular 11 offers experimental support for webpack 5 and the developers can use it to try out new things. The Angular team may extend the experimental support to achieve smaller bundles and faster builds once the webpack becomes more stable.

Here’s the command for using webpack 5. Add the following lines to the package.json file:

“resolutions”: {
“webpack”: “5.4.0”
}

#Shift to ESLint

TSLint has been one of the most popular listing tools used and recommended by the providers of Angular development services. Recently, the duty is handed over to ESLint.

With Angular 11, Codelyzer and TSLint are officially deprecated and they will be removed in future versions. The latest version has introduced a 3-step method for migrating from TSLint to ESLint:

Step 1 – Run ng add @angular-eslint/schematics
Step 2 – Now, run the command ng g @angular/schematics:convert-tslint-to-eslint {{YOUR PROJECT NAME}}
Step 3 – Remove the root-level tslint.json.

#Faster Builds

Angular 11 brings forth radical speed improvements. The process of NGCC update is now 2-4x faster than earlier. Therefore, the developers need not spend a long time waiting for completing builds and rebuilds.

#TypeScript 4.0 Support

Angular 11 supports TypeScript 4.0. The support for TypeScript 3.9 has now been dropped. One of the primary reasons behind this is to enhance the speed of builds. The latest version ensures faster and smoother builds than the previous versions.

#Better Logging and Reporting

The latest Angular version has brought various changes to the builder phase reporting that make it more helpful during development. The CLI output includes more user-friendly and readable information.

#Other Changes

Apart from the ones mentioned above, the latest Angular version brings several other changes like:

• Service worker improvements
• New automated schematics and migrations
• Lazy loading support for various named outlets
• The support for Internet Explorer 9,10 and IE mobile support is entirely removed
• preserveQueryParams is removed in the router. Instead, the developers can use queryParamsHandling=”preserve”
• Stricter types are now built in pipes
• Angular CLI can generate resolve guards
• The formatDate function supports ISO 8601 week-numbering year formatting
• Expressions within the ICUs are now type-checked again
• The async pipe does no more return undefined for any input that has been typed as undefined.

How to Update to Angular 11

You can hire Angular developers to update your application to Angular 11. The developers need to run the following command:

ng update @angular/cli @angular/core

Found the article useful? Share with your acquaintances and let them know all about Angular 11.