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.
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:
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
- 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.
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
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
In the financial sector, buy now pay later(BNPL) has become a hot topic. In Jan...Read more
The outbreak of COVID-19 was an unstoppable massacre not only for the human rac...Read more