What are the new features of Angular 11?

The Angular Team has announced their release of Angular 11 with great new updates that include the framework and the CLI. Let’s get into it!

Updates on Operation Byelog

The Angular team has finally triaged the issues in all three monorepos and are committed to triage all new issues within 2 weeks after being reported. The issues in the router and forms are fixed as well. Another great news is that Angular has promised to listen closely to their community and improve the process to accept community contributions.

Automatic Inlining of Fonts

Another great feature of Angular 11.0.0 is automatic font lining. Angular CLI will download and inline fonts during compile that are used and linked in the application by default. To use this optimization, all you need to do is update your Angular app!

Component Test Harnesses

It’s an improved version of the original one that was introduced in Angular 9. In version 11, there is now a harness for all of the components, which gives developers the ability to create more robust suites. They have also included new APIs and performance improvements. Now developers can run multiple asynchronous interactions with components in parallel that makes working with asynchronous actions in tests easier with the new parallel function. And with the manualChangeDetection function, which disables automatic change detection in unit tests, developers can have access to fine-grained control of change detection.

Updated Language Service Preview

The new version of Language Service Preview is an Ivy-based language service that gives a more powerful and accurate experience for developers. Similar to the TypeScript compiler, the new language service can correctly infer generic types in templates. For instance, as you can see in the image below the new version can infer that the iterable is of type string. Although this update is still in development, we can’t help but be excited for its release on the upcoming dates.

Updated Hot Module Replacement (HMR) Support

Angular now has updated CLI that allows enabling HMR when starting an application with ng serve. You can run the following command: Let's start by creating our template Angular app to use in Electron.

A message will be displayed confirming that HMR is active after the local server starts the console. Attention! The HMR is enabled for the dev server. To learn more, click on this link for information on working with HMR for webpack. Without refreshing a page, all the latest changes to the components during the development, styles, and templates will instantly update into the running application. To not slow developer’s productivity, this new feature will preserve data typed into forms and the scroll position.

Experimental webpack 5 Support

The new version also presents Experimental webpack 5 Support where teams now can opt-in to webpack v5. Now that you can experiment with module federation, soon enough with webpack v5 you can do:

• Faster builds with persistent disk caching
• Smaller bundles thanks to cjs tree-shaking

It is in the experimental phase and the Angular team suggests not to opt-in for production uses. To try the new webpack 5 add the following section to your package.json file:

NOTICE: For now you’ll have to use yarn to test this as npm does not yet support the resolutions property.

Other new cool features

The new Angular 11 version introduces a ton of new cool features like Improved Reporting and Logging, Faster Builds, Linting, Housekeeping, Roadmap. To learn more about these features, make sure to read the full article from Angular Teams on Angular 11.

Update to the new version now!

If you would like to update to the newest version, run this command to update Angular and the CLI:

Go to update.angular.io to get detailed information and guidance on updating. The Angular team always recommends upgrading one major release at a time to have the best update experience.

Hope you enjoyed our #MondayBlog on this Angular update and will have fun using the latest features! Stay tuned for the upcoming Angular news.