Hello
Friends,
In this article, I will explain Angular
Version 11 new features. Version 11 of Angular has been released
on Nov 12, In Angular Version 11 having below listed features.
New features and changes in Angular 11
Component test harnesses
Component test harnesses
is a new feature that was added to Angular with the release of Angular Version
9. It was used to test Angular material components and it also provides a
robust and legible API surface to help developers while testing material
components.
TypeScript 4.0 support
The new Angular 11
upgraded the supports for TypeScript from version 3.9. Now, Angular also
supports TypeScript 4.0. The goal with this update is to improve the build
speed. So, the new Angular ensures an improvement in the build system speed
from the older versions and also updates the speed of ngcc.
webpack 5 support
webpack is a tool that
lets developers compile larger JavaScript modules. It is also known as a module
bundler. It compiles a large number of files and generates a single file that
can run an app. The new webpack 5 was released last month, but is not fully
stable for use. The new Angular 11 supports the latest release of webpack. The
reason it supports the new webpack is because Angular wants to achieve
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
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:
1.
"resolutions": {
2.
"webpack": "5.4.0"
3.
}
Currently, we need to test this,
as npm does not yet support the resolutions property.
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