Angular Version 11 Is Now Out ! What's New in Angular 11 | Appventurez
CONTACT

Angular Version 11 Is Now Out!

Omji Mehrotra By Omji Mehrotra | November 26, 2020
angular 11 release notes

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. 

angular journey infographics

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
angular 11 new features

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
Omji Mehrotra

Co-Founder and AVP Technology at Appventurez. An accomplished Android and React Native developer who is a fan of clean and optimized code, he is a passionate team builder having smart project managerial skills and has a deep love to provide end to end solution.

⚡️ by Appventurez

Leave a Reply

Please rate*

Your email address will not be published. Required fields are marked *

Hey there! This is Omji, author of this blog. Leave your email address and we'll keep you posted on what we're up to.

This will subscribe you to Appventurez once-a-month newsletter. You can unsubscribe anytime. And we promise not to pester you or share your data :)

Hey there, wondering where this article came from? It was produced by some people at Appventurez, a Mobile & Web App Development Company. We are here for solutioning of your technological needs.

Our Latest Blog

best upgrades for business growth
Let’s Checkout The Top Tech Upgrades For Businesses!

Due to the rapid digitalization, it’s imperative to keep track of top tech up...

Read more
How To Create An API: Best Practices & Tools

Today, pretty much every mobile application and site are controlled by Applicat...

Read more
The Best Strategies: How To Successfully Pivot For Startups?

Change is only constant in the creation and scaling of startups. You never know...

Read more

We’re your neighbor

Appventurez is a well known mobile app development company in the USA and India that works to build strong, long-lasting relations with its clients in different locations.

india flag appventurez
India (HQ)

Logix Infotech Park, 1st Floor, Plot No. D-5, Sector 59, Noida, Uttar Pradesh 201301

Inquiries : +91-9899 650980

5 Taunton Place Craigieburn VIC Australia

Inquiries : +1-815-283-8355

Office #216 Regus Tower Bank Street, Doha Qatar

Inquiries : +974-33497259

usa flag appventurez
USA

12501 W Chandler Blvd, Suite 200 Valley Village, CA 91607 USA

Inquiries : +1-888-822-1022

Rimal 5 Jumeirah Beach Residence 2 Dubai

Inquiries : +1-815-283-8355

south africa flag appventurez
South Africa

3 monterrey Complex, 63 Montrose Avenue, Northgate, Johannesburg, 2191

Inquiries : +27 737 810 945

7 Hanover House, Chapel Street, Bradford BD1 5DQ, United Kingdom

Inquiries : +1-815-283-8355

Netherlands flag appventurez
Netherlands

Amstelveen, Netherlands

Inquiries : +31-(0)-61-020-9692

Calle Ambar 2711, Av Victoria, 45089, Zapopan, Jalisco, Mexico

Inquiries : +521 332 393 9998

ghana flag appventurez
Ghana

North Industrial Area, Otublohum Road, Opposite Melcom Plus, Accra, Ghana

Inquiries : +27 737 810 945

appventurez worldwide presence
india flag appventurez
India (HQ)

Logix Infotech Park, 1st Floor, Plot No. D-5, Sector 59, Noida, Uttar Pradesh 201301

Inquiries : +91-9899 650980

5 Taunton Place Craigieburn VIC Australia

Inquiries : +1-815-283-8355

Office #216 Regus Tower Bank Street, Doha Qatar

Inquiries : +974-33497259

usa flag appventurez
USA

12501 W Chandler Blvd, Suite 200 Valley Village, CA 91607 USA

Inquiries : +1-888-822-1022

Rimal 5 Jumeirah Beach Residence 2 Dubai

Inquiries : +1-815-283-8355

south africa flag appventurez
South Africa

3 monterrey Complex, 63 Montrose Avenue, Northgate, Johannesburg, 2191

Inquiries : +27 737 810 945

7 Hanover House, Chapel Street, Bradford BD1 5DQ, United Kingdom

Inquiries : +1-815-283-8355

Netherlands flag appventurez
Netherlands

Amstelveen, Netherlands

Inquiries : +31-(0)-61-020-9692

Calle Ambar 2711, Av Victoria, 45089, Zapopan, Jalisco, Mexico

Inquiries : +521 332 393 9998

ghana flag appventurez
Ghana

North Industrial Area, Otublohum Road, Opposite Melcom Plus, Accra, Ghana

Inquiries : +27 737 810 945

10 Global Offices

Across 124 territories and 33.6k global workspace

700+ Worldwide clients

Largest International clients

24 x 7 Availability

Effective support, anytime