Features of Angular 11: What’s New?

Angular is a framework that assists in the complete structuring of single-page client applications through the use of TypeScript and HTML. Written in TypeScript, Angular imports certain fundamental concepts to web apps.

Team Google, the original manufacturers of AngularJS and the subsequent Angular series, recently released Angular 11 in November of 2020. The new version enhances the capabilities of this single page application framework to focus on simplifying the developer’s experience.

New Features in Angular 11

Angular 11 offers several new improvements that address bugs and other issues raised by the community.

The team at Angular has followed the release of iVY in Angular 9, the support for Typescript 3.8 in Angular v9.1 and the modifications made to Angular UI in v10 with significant improvements in Angular 11. We are determined to unearth these exciting new features in this blog.

1. Updated HMR Support

HMR or Hot Module Replacement is an inherent mechanism that allows the replacement of modules without a browser refresh. HMR has been around in the last few versions of Angular and developers have used it to simplify their experience. Angular 11 improves on all previous versions to offer support to incorporate and enable HMR to initiate an application. The following command will get developers started:

• ng serve –hmr

2. Automation in Fonts In-Lining

Angular 11 also comes with enhanced features to automatically inline fonts during coding. This addition helps convert Google Icon and Fonts directly Inline in your index html. This feature is enabled by default in Angular 11, and all you need to do is ensure an active internet connection. You can set this new improvement as default in previous applications built on Angular, by updating them to version 11.

3. Updated Language Service Preview

Angular 11 comes with the Angular Language Service feature that provides developers with a set of functional tools to enhance productivity within the environment. The new language service is based on View Engine, and provides a more powerful experience to developers.

4. Faster Build Periods

Angular 11 brings faster development build cycles and periods to the mix. These periods help make updates into key areas of the development process including:

• TypeScript v4.0
• Ngcc – the compiler for Angular

Angular 11 promises 4x faster speeds for the ngcc update process. This ensures that users will have to wait less for their builds to complete. Angular 11 also prepares users for TypeScript 4.1 through faster compiling and more improvements in ngcc updates. These changes in speed and reductions in build time will become more prominent as Angular launches future versions with TypeScript 4.1 compatibility.

5. Improved Logging and Reporting

Angular version 11 significantly improves the logging and reporting process for developers. This improvement has been made possible through changes to the builder phase reporting process. This makes life easier for developers and other experts.

New CLI updates by Angular will also help make the reports and logs easier to read for concerned individuals. This will come as a significant boost for developers working on Angular 11 as a faster and more efficient way of reading reports and logs will save them time in the long run.

6. Webpack 5 Support

Angular 11 improves on previous versions to offer experimental Webpack 5 support to users. A Webpack is basically used by developers to incorporate and save multiple documents in a single record or bundle online. This not only saves time, but also minimizes effort. Webpack v5 is the latest in the Webpack series and was released just a couple of months back.

While Webpack v5 is up for experimentation and still needs some time to become stable, users on Angular 11 can experiment with different modules and storage options. The addition of Webpack v5 will help developers with:

• The creation of smaller bundles with cjs tree-shaking
• Disk caching and faster builds

7. Upgrade to ESLint

All previous versions of Angular have come with a default TSLint implementation for linting on the platform. The team behind Angular 11 has now recommended users to drop TSLint and move to ESLint. Angular 11 has deprecated the use of Codelyzer and TSLint and all future versions will have no default process to lintprojects on Angular.

8. Forms

Angular 11 has made significant amendments to signal improvements in the typing of asyncValidators. This specific ease of access wasn’t available in previous versions. All of the FormControl, FormArray and FormGroup classes within previous versions had async validators set at the time of initialization. The newest version has emitted the status event into the observable statusChanges for ease of use.

9. Router

Developers using previous Angular versions had reservations over the process followed during the Route Reuse Strategy. Developers were often concerned over their future routes being traded for and replaced with child routes. Angular 11 has fixed this issue by recommending adjustments in the code. Users and developers can easily specify their individual properties through the Navigation Extras tab to fix this issue.

Conclusion

Based on historic trends, we know Angular releases two versions every year on a bi-annual basis. New versions are released after six months of the previous launch. Since Angular 11 was launched on the 14th of November, we can expect the next version to be released around the 2nd quarter of 2021. Angular 11 is a massive release with interesting improvements for forms and pipes. We can now cross our fingers and wait for the next version to arrive with further advancements and the expected Ivy-based language service support.