Wednesday 17 March 2021

Angular 11 New Features

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

 

Happy programming!!
Don’t forget to leave your feedback and comments below!
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
------------------------------------------------------------------------------