Angular Version 11 Is Now Out!

The sense of humor of the Angular team is well witnessed on 11/11 with the release of Angular Version 11. This version includes some exciting features such as components, CLI, and framework that we can’t stop ourselves from sharing after using the version.

So, with a hot mug of coffee, let us help you give an insight into Angular Version 11 but before that, let us give you a glimpse into older versions. 

Read More – Angular 9 and Angular 10 

With a glimpse into all other versions of Angular, let us dive into what Angular Version 11 is bringing to the table. 

Join Angular Version 11

It is effortless to update your version of Angular with the simple command “ng update @angular/cli @angular/core”.

Just like any other version of Angular, Version 11 is also full of surprises that are more than enough to keep developers hooked. The significant highlights of Angular Version 11 are:

#1 Operation Byelog

This is one of the significant components of Angular that is updated as per the community requirements that the A-team analyses. This update includes the three Mono-Repos that triage all tickets. Now, the new standards are set in Angular 11 for triaging any issues. 

#2 Component Test Harnesses

If you are a regular user of Angular then you might be aware of Material Components in Version 9. Well, the good news is that the feature is back for all the components in the latest version. This offers a legible and robust API that is used for the testing while interacting with Angular Material components. With the latest version, the developers can enjoy working on the software with more robust test suites, new APIs, and an increase in performance. The asynchronous action can work easily with parallel functions while running multiple asynchronous interactions. 

#3 Automatic Inlining of Fonts

What can be a better way than to increase the first contentful paint (FCP) of an application? This feature easily speeds up the FCP that developers can link or use in the application. Just update your app and optimize it with some amazing inline fonts. 

#4 Reporting & Logging

Now reporting and making logs is easier than it was ever before with the CLI output in Angular Version 11. It is easier to read the logs with a bit of change that A-team did to the builder phase reportings. 

#5 Kendo UI Updates

Version 11 also includes the peer dependencies and Kendo UI Components update. However, if the Kendo UI packages get some warnings for the older Angular version then simply run nom update. 

#6 Language Service Preview

There are several helpful tools included in the Angular Language Service that offer an accurate and powerful experience. Also, this version will have a glimpse into Ivy-based language services. Whereas in the present version, the View Engine is majorly focused. 

#7 Faster Builds

This version helps in the building cycle and faster development with small changes in key areas. 

• TypeScript v4.0 Faster Compilation
• Ngcc update while installing dependencies is 2-4X faster. 

#8 Hot Module Replacement Support

If you want to avail HMR support then you need to configure and make a few code changes that make it easy to integrate into Angular. Just run the command ng serve –hmr. The latest changes in the templates, components, styles, etc. will be updated instantly to the application without refreshing the page. The motive is to increase developer’s productivity and help in preserving Data types. 

#9 Webpack 5 Support

Webpack is one of the major that allows developers to compile many files in a single file or bundle. In the previous version, Webpack 5 was introduced but was not completely stable. In the latest version, developers can enjoy the Webpack 5 experiential support that allows them to try new things. It is mainly done to support small bundles and faster builds. It is easy to try Webpack, open a package.json file, and enter a small code in it:

“Resolutions”: {

“Webpack”: “5.4.0”

}

#10 ESLint

One of the most popular linting tools used by the developers was TSLint but it was not replaced with ESLint. With the new update, the TSLint will be gone and you will be introduced to ESLint. It is simple to set it up:

• Add dependencies

ng add @angular-eslint/schematics

• Run convert-tslint-to-eslint schematics 

Ng g @angular-eslint/schematics:convert-tslint-to-eslint

{{YOUR_PROJECT_NAME_GOES_HERE}}

• Use root ESLINT configuration instead of root TSLint

Tslint.json – delete the root level

Other Changes in Angular Version 11

• Service worker improvements
• Automates schematics and migrations
• Generate resolve guards
• Lazy loading support
• ISO 8601 is supported by the format date function in the format of the week-numbering year. 
• Stricter types

These are the major updates with Angular Version 11 that is full of surprises. For more details visit update.angular.io that includes guidance and information on the updates.

Omji Mehrotra

VP-Delivery

Expert in the Communications and Enterprise Software Development domain, Omji Mehrotra co-founded Appventurez and took the role of VP of Delivery. He specializes in React Native mobile app development and has worked on end-to-end development platforms for various industry sectors.