What the new Angular 11 is all about? A Quick Overview

Quick Summary: Angular 11 is a big step forward in the advancement of this JavaScript framework. But what’s new that makes it a leap forward? Get a quick overview of this framework with this article to learn about these updates.

Google’s JavaScript, or TypeScript framework, Angular is commonly used to build web applications and desktop or mobile apps. Of late, GitHub reports that Angular has already hit 68,000 stars.

Google’s Angular Team, along with a host of organizations and community members, were responsible for the release of the latest angular version, Angular 11, on 11.11.2020.

So, what’s new about Angular version 11?

Announcement

Angular 11 was launched with some latest updates for software developers. The release received updates across all platforms, which includes components, framework, and the CLI. Some of the significant Angular 11 features include stricter types, improved router performance, automatic font inlining, and much more.

What is Special about the New Angular 11 Updates?

Updates keep coming. So, what is different about this update that Angular 11 received? How is it going to help developers?

Without any further delay, let’s get an insight into the highlights of Angular 11 and learn more about the Angular 11 features.

1. Automatic Font Inlining

Automatic font inlining is one of the major highlights of the latest update. To make apps faster, the first contentful paint also needs to speed up. During compilation, Angular CLI would download the fonts in use and inline them. Enabling this feature in apps by default with the latest Angular version features ensures developers can take ideal optimization, and users can update the app.

However, it is not a significant improvement to help well-configured and integrated service workers.

Google Fonts and Google Icon are converted to inline by default in index.html with a flag. It is critical to ensure that you have a steady internet connection.

2. Component Test Harness

Angular Version 9 experienced Component Test Harness. They provide a legible and robust API surface for testing other Angular Material parts and components. Moreover, it gives developers a new way to interact with the other Angular Material components using API for testing.

With the latest version 11 releasing, there’s a harness for all components. Now, new developers can also create robust suites for testing.

It comes with many updates, new APIs, and performance improvements. With similar functions, handling async actions within the tests is more comfortable as you would run several async interactions with the components simultaneously.

A function such as the manual check detection would give easy access to better detection control by disabling auto-changes inside the unit tests.

Some additional aspects for developers are:

• CdkVitualForOf supporting sets in line with the NgForOf, which supports both arrays and iterables
• Fixed layout with CDK table support to enforce consistent column widths
• Connected overlay directive with disabled close input to configure the overlay and determine whether it can be closed through user interaction or not

3. Updated Language Service Preview

Angular Language Service is an excellent tool that provides add-ons to make development more fun and productive. The previous version of this language service followed View Engine, whereas the updated version is Ivy-based. The new and updated language service also provides a more accurate and powerful experience for developers.

Angular documentation reads –“The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates. It works with external templates in separate HTML files, and also with inline templates.”

Even though the feature is in its developmental stage, it can behave the same way as the TypeScript compiler.

4. Upgraded Reporting and Logging

The latest Angular version ships with a few upgrades and changes in logging and reporting. Some new modifications were made to the CLI to ensure logs and reports are easier to read. The builder phase reporting has changed to make it more useful during development. This would be a significant boost to web developers to easily read reports and logs while saving time. Besides, it would increase efficiency.

5. Restructured HMR (Hot Module Replacement) Support

HMR is a unique mechanism to allow the replacement of different modules without refreshing the browser altogether. Although it is not a new Angular feature, developers can now use it optimally without making any code or configuration changes, unlike the previous version. With the new Angular 11 updates, the task becomes effortless and less time-consuming as there is a CLI command for the same.

In the latest version, Angular 11, you can enable the Hot Module Replacement using the ng server command with the hmr tag. The console gives a message confirming HMR has been enabled for the dev server as the local server kickstarts.

All the latest changes to components, styles, and templates would be updated instantaneously into a running application without a full refresh during the development stage. Any data that has been submitted into the form or the scroll positions of the page remains unchanged.

This would be valuable for developers. It would also boost productivity immensely.

6. Faster Development

With Angular 11 updates, the development rate would speed up for some of the critical areas. While dependencies are installed, the ngcc process of update is likely to become 3 to 4 times faster. You can also expect a speedier TypeScript v4.0 compilation.

7. Webpack 5

Webpack is a useful tool for compiling a large volume of files into a single file or bundle. Webpack 5 is a new and advanced version that was released recently. It is still unstable.

However, with Angular 11, you would have Webpack 5 experimental support, which you can use to try out other things. The release notes that the Angular team goes by can offer extended experimental support and achieve faster development and even smaller bundles.

8. Linting

The earlier Angular version has TSLint, which was a standard tool for linting among developers. However, TSLint is now belittled, and developers are migrating to ESLint.

Not surprising that Angular is also moving to ESLint in its latest version. Developers would no longer use TSLint. Angular 11 deprecates the use of Codelyzer and TSLint, which means it can no longer be available as a default linting tool.

To migrate to ESLint, there is a three-step guided method – add dependencies, run the schematic on the project, remove root TSLint configuration, and start using ESLint.

Other Significant Changes

Besides, Angular 11 updates bring several small and significant changes, such as:

• Latest automated schematics and migrations
• Improvements in the service worker
• Support lazy loading for the names outlets
• Resolve guards that Angular CLI can generate
• Stricter types
• formatDate function supporting ISO 8601 week-numbering for year format

Some groundbreaking changes

• Angular 11 is all set to remove IE 9 and 10, and IE mobile support
• It does not support TypeScript 3.9 any longer
• preserveQueryParams is removed from the router, and queryParamsHandling=preserve can be used
• Expressions in ICUs are type-checked once more
• Async pipe does not claim to return the “undefined” for input, typed “undefined.”

Angular 11 Roadmap

The Angular roadmap is updated to ensure users are posted about the latest priorities and changes. Some announcements, however, regarding updates may be in-progress from the roadmap. This indicated that the team had taken great efforts to roll out and allow web developers to give early feedback to make necessary changes before the final launch.

The Ivy-based language service is a tremendous change that is exciting for developers. And not to forget that TypeScript 4.0 is the best news for Angular development. It would give the much-needed edge to the latest version.

Getting Angular 11

Here’s how you can easily upgrade to the recent version of Angular. Once your setup is ready, run:

ng update @angular/cli @angular/core

Your Angular update will be done in minutes!

Conclusion

Angular 11 is a stable platform with a few changes in demand, and developers have already witnessed some significant changes in the latest Angular 11. Over time, more changes and modifications are likely to take effect. With better logging and reporting, it would be easier to maintain logs and minimize the chances of errors. Hire Angular developers from a trusted and well-established development company that offers the right experience and expertise in handling the latest Angular version features.