What’s New in Angular 11? (Highlights of Angular 11 Features)

Angular 11 Overview:

Angular 11 release date, features and update.

There’s great news for all Angular followers, developers, and product owners as Angular 11 latest version, has brought in a lot of good features that can come in very handy. If you are wondering what’s new in Angular 11, then let’s have a look forward to, so without wasting any time, let’s get into it. Explore the latest Angular version features and how it can benefit you as Angular developer.

What’s New in Angular 11 Announcement:

Is Angular 11 Stable?

Yes, it is. Angular 11 has become available as a production release on 14th November and the release date of Angular 11 is November 11, 2020. This is Angular 11 stable release date. Moving forward to what is new in Angular 11, it has got updates all across the platform, including the CLI and components and the framework. The Angular 11 version’s significant highlights include router performance improvements, stricter types, automatic in the lining of fonts, and a lot more.

The automatic in the lining of fonts can make the apps faster. The Angular CLI while compilation will download and inline the fonts being used.

Angular 12 is Now Available! Find Out the new Angular 12 features and Enjoy

Latest Angular 11 New Features:

Well, there’s plenty to look forward to in the latest angular version. So let’s dive into Angular 11 features.

Automatic Inlining of Fonts:

One of the new features in Angular version 11 is automatic in fonts’ lining. The angular CLI will now automatically download and inline the fonts that are linked with the application. Going forward, this feature will be enabled by default, which is very helpful for commercial applications or websites as they’re the ones who benefit the most from having better web vitals. It is, however, not an improvement that can help applications that already integrate well-configured service workers. But it is still good to have.

Google Fonts and Icon will be converted to inline in index.html with the flag mentioned below in angular.json under the build option. It is enabled by default. Th use this functionality; it is essential to ensure that the internet connection is available during the build. This has to be kept in mind if developers are running the build on CI.

"configurations": {
  "optimization": {
    "fonts": false
  }
}

OR

"configurations": {
  "optimization": {
    "fonts": {
      "inline": false
    }
  }
}

Source

Improved Reporting and Logging:

Version 11 of Angular has improved the reporting and logging.

Angular 11 changes have been made to the builder phase reporting, which makes it even more helpful during development. New CLI updates have also been introduced in this Angular version, which will make the logs and reports easier to read. This will come as a huge boost to developers as a better way to read logs and reports can save a considerable amount of time and increase efficiency.

Source

Component Test Harnesses:

Component Test harnesses were first introduced in Angular 9. It is known to provide a legible and robust API surface, which helps in testing Angular Material. It gives the developers a great way to interact with Angular Material components during testing. The APIs can interact with the components in a similar way to the end-users, and the tests can insulate themselves from the changes in the DOM.

The latest Angular version has introduced harnesses for all of the components. This makes testing a lot of more-easier for developers. With the latest updates and harnesses for all components, developers can now create more robust test suites.

Besides this phenomenal feature, performance improvements have also been included, and the API itself has undergone quite a significant improvement.

You May Also Like To Read:
Angular Best Practices: Organize Your Angular App With these Practices

The parallel function can now be used to work with asynchronous actions in the tests in an easier manner as it allows the developers to run multiple asynchronous interactions with the components. This saves a lot of time by allowing developers to perform multiple actions simultaneously. This function also takes care of change detection.

The ManualChangeDetection function can be used to control the change detection in a more precise or fine manner by disabling automatic change detection in unit tests. This can help verify the more complicated scenarios. The official doc states that the test harnesses will run Angulars’ change detection prior to reading the state of a DOM element and after interacting with one.

There are some other additional aspects as well that will come in very handy for developers.

• The CdkVitualForOf now supports Sets. It is now in line with NgForOf as it supports both iterables and arrays and general.
• A fixed layout is now supported in the CDK table. This option helps in enforcing consistent column widths and optimize sticky rendering styles for native tables.
• The connected-overlay directive has disabled close input, which helps in configuring whether or not the overlay can be closed by user interaction.

Angular 11 also has a new type of coercion utility that can improve the quality of codes.

Updated Language Service Preview:

The Angular Language Service is very helpful as it provides tools to make development with Angular fun and productive at the same time. The Language service was previously based on the View engine, whereas the latest angular version provides Ivy-based language service, which is more powerful and accurate. It provides a better experience for developers. The language service will now be able to correctly infer generic type sin templates just like the TypeScript compiler does. The feature is still in development and will give a great edge once it is rolled out properly.

Source

Updated Hot Module Replacement (HMR) Support:

HMR or Hot Module Replacement is a mechanism that allows the modules to be replaced without a full refresh of the browser. It is not a new feature in Angular and was present in previous versions as well. Developers could use it, but it required configuration and code changes, which made it a bit time-consuming. With Angular 11, the amount of effort required has been reduced significantly as they have provided a CLI command for it.

In this version 11 of Angular, you can just use the ng serve command and an hmr tag to enable Hot Module Replacement. Once the local server starts, the console will show a message as well confirming that HMR is enabled for the dev server. To enable HMR you can use ng serve command

ng serve – configuration hmr

During development, the latest changes to templates, components, and styles will be updated instantly into the running application without a full page refresh. The data entered into forms or scroll positions, etc, remain unchanged.

This is very useful for the developers and boosts productivity greatly.

Faster Builds:

The Angular team is working on a faster development and build cycle by bringing in updates in key areas. While installing dependencies, the ngcc update process is now 2-4 times faster.

The latest updates also allow faster compilation with TypeScript version 4.0.

Webpack 5 support:

As we know that the Webpack can be used to compile a large number of files into a single file or bundle. Webpack 5 is the latest version, which was released just a month or two back. It is undergoing development and fixes and will take some time to be entirely stable.

The latest version of Angular, Angular 11, provides experimental support for web pack 5 and can be used to try out new things. Currently, developers can experiment with the module federation, and in the future, Webpack 5 will clear the path for faster builds with persistent disk caching and smaller bundles. The Angular team believes that they can extend the experimental support very soon, enabling developers to achieve smaller bundles and faster build once things are stabilized.

The Webpack can be used by using yarn and needs to be called using yarn as the npm doesn’t support the resolutions property yet.

"resolutions": {
     "webpack": "5.4.0"
}

Linting:

The previous versions of Angular used TSLint as it has been one of the most popular linting tools among developers for a long time. But now TSLint is being deprecated, and migration is taking place to ESLint.
Angular is also making a shift to ESLint with the latest version, and developers will no longer be able to use TSLint for linting purposes. The use of TSLint and Codelyzer is being deprecated in Angular 11, which means that the default implementation for Linting projects will no longer be available in the future.

A three-step method has been introduced for the migration from TSLint to ESLint.

First, we need to add relevant dependencies using ng add @angular-eslint/schematics.

Next, we need to run the convert-tslint-to-eslint schematic on a project, and finally, we need to remove root TSLint configuration and only use ESLint.

TypeScript 4.0 Support:

In the latest angular version, the team has dropped support for TypeScript 3.9, which was previously used. This version only supports TypeScript 4.0.

This upgrade greatly speeds up the builds-, which is a major reason why Angular 11 ensures greater build speeds in comparison to previous versions.

Supports Lazy Loading with Named Outlets:

In the previous versions until now, named outlets always supported the component, and there was no way to lazy load the module with the use of named outlets. But in the latest version of Angular, Angular 11, you can use it now with ease and convenience.

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

Source

Apart from these major changes in Angular 11, developers will find some other changes as well in the current Angular version.

Angular 11 gets several small changes like,

• Service worker improvements.
• New automated schematics and migrations.
• Resolve guards can now be generated by Angular CLI.
• The formatDate function supports ISO 8601 week-numbering year format.

The Angular team has done some housekeeping as well, where they have removed the support for IE9/IE10 and IE mobile. Only IE11 is now supported in Angular 11. Deprecated APIs have also been removed, and a few have been added to the deprecation list.

You May Also Like To Read:
How to Convert PDF to Image in Angular 11

Angular 11 Roadmap 2021:

The Angular team has also updated the Angular 11 Roadmap 2021 to keep users posted about the current priorities. Some announcements are regarding the updates on in-progress projects from the roadmap. This shows the team’s approach to roll out greater efforts that allow developers to provide early feedback that can be incorporated in the final release. They have collaborated with Lukas Ruebbelke, a member of the Angular community, updating the content of some of the projects, which will better reflect the value developers will get.

This is a great way to get valuable feedback and make necessary changes and updates that will benefit the entire community as a whole.

How to Get Angular 11?

Angular 11 update is pretty simple. When you are ready, all you need to do is run the following command: ng update @angular/cli @angular/core.

To get more information about it, you can head over to update.angular.io, where you will get detailed guidance.

Wrapping Up:

We have already seen the major changes in Angular 11 that have been implemented in the current version of Angular – Angular 11.

They have focused greatly on improving the type of safety and reducing backlogs, which had been a great pain for the community in the past. Hot Module Replacement in Angular will be a major help during the build process and the improvement in types of all pipes can help avoid errors at runtime. One major change that is going to be groundbreaking is Type-Safe Forms, which is currently in progress.

The automatic inlining of fonts is a good feature that can speed up the app-building process.

Angular version 11 is a solid release with just a few tweaks required here and there. The type of safety improvements for pipes and reactive forms is a very exciting update to look forward to. The Ivy-based language service is also something that is going to excite the developers a lot.

The support for TypeScript 4.0 is also great news for all developers and is going to give Angular 11 a significant edge.

Improved Reporting and Logging can help in maintaining logs better and reduce errors.

All the new features the Angular team has introduced is going to come in very handy and make life easier for developers. The changes that are still being worked on will make it even more useful once they are stabilized and rolled out properly.

All in all, it’s a great update to look forward to, and hopefully, the release is going to turn out to be one of the best to date. If you are looking for a helping hand to keep your Angular projects up to date to the latest stable release, get in touch with us today to upgrade your Angular app with our dedicated Angular developers— a lot of optimism and a lot to look forward to, for us.