What is New in Angular 11? – Everything you need to know

What is New in Angular 11: An Overview

The Updated Angular 11 Features

Succeeding the different introductions made in Angular 9 and 10, some target concerns were considered for the 11th iteration of this Google-developed framework. Exploring these Angular 11 new features are valuable aspect covered in Angular Training. The features improved in this version have primarily been centered on automation, stricter types, and improved router performance. Some highlights of new updates in Angular 11 can be listed as follows:

Automated Inlined fonts

The automatic inlining of fonts in Angular 11 is a stark highlight. Google Fonts and Icon are converted into inline in index HTML. The fonts can be downloaded and inlined at compile time while being used and linked within the application. With the updated version 11, you can utilize this feature for production configuration while the build is running.

All we need to do to take advantage of this updated optimization is to make sure that the internet connection is available during the build and that the build is running on CI. We will also need to update our applications to enable this by default in apps built with Angular 11.

You can implement this feature as follows:

“configurations": {
"optimization": true
}
"configurations": {
"optimization": {
"fonts": false
}
}
“configurations": {
"optimization": {
"fonts": {
"inline": false
}
}
}

Operation Blog

There has been a target focus on community improvements and prioritizing of issues in this version. The goal was to triage tickets in each of the three mono repositories and develop a system for triaging any new upcoming issues. This has been achieved along with the resolution of many prominent existing issues.

Hot Module Replacement Support

The HMR Support or Hot Module replacement offers a channel to replace modules without refreshing the browser. Version 11 also provides HMR support for quick configuration and code changes in Angular. You can simply run the command ng serve -–hmr to get started with HMR support and activate it to update the latest changes to the components that will be instantly updated to the running application.

Enhanced Build Speed

Angular 11 also brings in speed-optimized development and build cycles with the NGCC compiler and TypeScript v4.0. The ngcc compiler renders 4 times faster updates in Angular 11, resulting in faster builds and less time taken for rebuilds. The Typescript 4.1 version extends to support faster builds and compilation for ngcc.

Webpack 5

Within Angular 11, you can also opt for Webpack v5, which facilitates the cumulation of many documents into a single record or bundle. Currently, this is available for experimental use to work with faster builds, disk caching, and smaller bundles with CJS tree shaking.

Improvements in Component Test Harnesses

While the Component Test Harness was an introduction of version 9, Angular 11 has introduced some pretty robust features for harnessing components more readily. Developers can interact with Angular material components, and there are additional features for performance enhancement, parallel functions, and the integration of new APIs.

Migration to ESLint

This is one major update in Angular 11, wherein instead of TSLint, migration is facilitated to ESLint. Being a popular tool in widespread use now, developers have very often deprecated the use of Codelyzer and TSLint. Angular developers have, thus, implemented a transition and have worked together to facilitate moving to ESLint.

Update the Angular app to 11

If you want to get started with Angular 11, then you need to update the Angular CLI and the core dependencies by using below CLI command below.

ng update @angular/core @angular/cli

Angular 12 Features

The upcoming release of Angular 12 in May 2021 is expected to bring some more improved integrations and deployment features as an upgrade within the framework. With some pretty robust updates already made in Angular 11, version 12 is going to focus on improving integrations with deployment providers and rendering more control to developers to fine-tune their builds. The highly awaited updates expected to be introduced with Angular 12 include:

• The new version is likely to facilitate the ng build Compiler command. With the ng-linker, Angular Ivy libraries will be readily sharable to NPM to reduce build time and enhance compiler compatibility.

• There are likely to be more robust uses under the yarn build bundler command with improved integration with many deployment providers.

• Angular Reactive forms will implement stricter types for checking and, thus, improve the setup ergonomically. More issues can be pointed out during development, and type-checking can be improved with version 12.

• Angular 12 also plans on removing Legacy View Engine to reduce overhead, cut significant maintenance costs, and reduce the size and complexity of the codebase.

• It will also facilitate production-ready support for Webpack5, which is a prominent featural aspect already explored in version 11. There is also added support for various inline components.

• To optimize the load time, Component Level Code-Splitting APIs have been incorporated where granular code-spilling can be applied at a component level. This is also expected to make the system highly ergonomic.

• Angular 12 is also implementing a plan to leverage the complete capabilities of the framework using Zone.js Opt-Out. This is to improve the process of debugging, reduce app bundle size, and simplify the framework in general.

• Version 12 will also make NgModules optional, allowing more flexibility for developers to work on independent components. Standalone components can be developed with API declarations for defining the scope of compilation.

With these features in store, it is expected that Angular 12 will improve the developer control levels and the possibilities of varied integrations within builds.

Read More:

• Angular Developer Salary in India
• Top Angular Interview Questions and Answers

Summary

Thus, Angular has several new inclusions to the basic framework and many more to expect within a short period. Angular's iterative approach to new integrations, which addresses current issues and improves focused areas, strengthens its robustness with each release. Update Angular to version 11 using ng update@angular/cli@angular/core and hold tight for version 12 with improved control and integration features, coming up soon in 2021! ScholarHat Angular Training is aligned with real-time which is delivered by Google GDE and Microsoft MVP globally via Type a message

Take our free angular skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE