Angular version 11 is here and there are some great updates. Let’s take a close look at the features of Angular 11.

1. 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.

2. #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.

3. #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

4. 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.
Resource: https://www.webguru-india.com/blog/angular-11-everything-you-need-to-know/
………………………………………………………………………………………………………
WebGuru Infosystems
Y8, Block-EP, Sector V, Salt Lake
Kolkata-700091, India
Website: https://www.webguru-india.com/
Email: enquiry@webguru-india.com
Phone: +91-8420197208
Follow us on: