Is Angular 11 features is worthy for next project

Well, Well, Angular version 11 is here, the latest Angular version has been released, and it's great. I know, I’m a little late in writing a blog on Angular 11, but It’s never too late to start something great. This post will tell about new Angular 11 features which will give you a clear picture to take Angular for your next project.

Welcome to Angular 11

More like other software updates, Angular is regularly updating its version. With every update it provides something new which is helpful to developers to live their life more easily. As you know, Angular V4, V5, V6, V7 and V8 are no longer under support.

As we know, Angular 9 was released in Feb 2020, Angular 10 was released on Jun 2020 and the Angular 11 released on Nov 2020 is the latest version till this blog was published.

What’s new in Angular version 11?

We all are very curious to know more what new in Angular 11, So just tight your seat belt and explore them one by one.

When it released

Angular 11 was released on Nov 11, 2020 and as per Angular official website the Long term support (LTS) ends on May 11, 2022.

TypeScript 4.0 Support

With this most recent update, the Angular has dropped uphold for TypeScript 3.9 and move with supports of TypeScript 4.0.

So, Why TypeScript 4.0 ?

One of the possible reasons for this update is to accelerate the builds. Angular team wanted to ensure a faster builds compare to previous versions.

WebPack 5 Support

As you most likely are aware, webpack is utilized to gather a huge amount of documents into a single bundled file, and it is also capable of transforming, bundling, or packaging files for faster builds with persistent disk caching

Webpack 5 is the most recent version. In case of new, Angular 11 offers trial help for webpack 5 and you can utilize it with Angular 11 to evaluate new things.

As per the release notes, the Angular team accept that they can stretch out this trial support to accomplish faster builds and tiny bundles once things get steady or stable. If you are curious about the use of Webpack 5 then go to package.json file and add below lines.

resolutions: { 
webpack: "5.4.0"

Linting Move to ESLint

Now Angular 11 is moving to ESLint, previously they were supporting TSlint, but now Angular is now depreciating the use of TSLint in version 11 and ESLint is recommended.

Improved Reporting and Logging in Angular CLI

Angular CLI console now change the look of reporting while using CLI command which help developer easier to read, and it looks more informative.

Now Hot Module Replacement (HMR) Support

Angular supports Hot Module Replacement in short it is HMR. To enable this feature we need to make a little changes in configuration.

Now with Angular 11, CLI can do this for us. So no need to change in configuration file. With below command we can enable HMR.

ng server — hmr

Run command and no code changes required.

Now during development the latest changes to components, templates and styles will be instantly updated into the running application. All without requiring a full page refresh. Data typed into forms are preserved as well as scroll position providing a boost to developer productivity.

Dropped Support for Legacy Browsers

In this update Angular team removed support for IE9/IE10 and IE mobile all legacy browser.

IE11 is the only version of IE still supported by Angular.

All Legacy browser support. Check here Angular — Browser support

Lastly, How to upgrade to Angular 11

Now you are aware about “What’s new in Angular 11?”. So, if you are interested in upgrading your existing Angular project to Angular version 11, then run below command.

ng update @angular/cli @angular/code

I hope you enjoy this feature update, and thanks for reading this blog.

Read code • Learn Code • Write code • Relax • Write code,

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store