Menu

Version 11 of Angular Now Available

November 11th, 2020

Photo of a Torch Ginger by Jules Kremer
Photo of a Torch Ginger by Jules Kremer

Welcome to the Angular version 11 release.

Version 11.0.0 is here and we’ve got some great updates for Angular developers everywhere. This release has updates across the platform including the framework, the CLI and components. Let’s dive in!

What’s in this release?

Updates on Operation Byelog

When we shared Angular’s Roadmap, one of the items was Operation Byelog where we committed to putting a significant engineering effort towards triaging issues and PRs until we have a clear understanding of the broader community needs. We can now report that the original goal is complete! We’ve triaged all the issues in all three of the monorepos and will continue this as an ongoing effort as new issues get reported.

This is our commitment: Going forward all new issues reported will be triaged within 2 weeks.

In the process, we resolved a few popular issues in the router and forms.

Also, we’ve closed the third most popular issue!

Now, we’re planning the next steps to support the Angular community. We’ll continue triaging and fixing issues, and work towards improving our processes for accepting community contributions.

Automatic Inlining of Fonts

To make your apps even faster by speeding up their first contentful paint, we’re introducing automatic font inlining. During compile time Angular CLI will download and inline fonts that are being used and linked in the application. We enable this by default in apps built with version 11. All you need to do to take advantage of this optimization is to update your app!

Component Test Harnesses

In Angular v9 we introduced Component Test Harnesses. They provide a robust and legible API surface to help with testing Angular Material components. It gives developers a way to interact with Angular Material components using the supported API during testing.

Releasing with version 11, we have harnesses for all of the components! Now developers can create more robust test suites.

We’ve also included performance improvements and new APIs. The parallel function makes working with asynchronous actions in your tests easier by allowing developers to run multiple asynchronous interactions with components in parallel. The manualChangeDetection function gives developers access to finer-grained control of change detection by disabling automatic change detection in unit tests.

For more details and examples of these APIs and other new features, be sure to check out the documentation for Angular Material Test Harnesses!

Improved Reporting and Logging

We’ve made changes to the builder phase reporting to make it even more helpful during development. We are bringing in new CLI output updates to make logs and reports easier to read.

Screenshot of angular CLI output nicely formatted into columns.
Improved CLI output formatting

Updated Language Service Preview

The Angular Language Service provides helpful tools to make development with Angular productive and fun. The current version of the language service is based on View Engine and today we’re giving a sneak peek of the Ivy-based language service. The updated language service provides a more powerful and accurate experience for developers.

Now, the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does. For example, in the screenshot below we’re able to infer that the iterable is of type string.

Screenshot of IntelliSense style insights in Angular templates.
Angular Language Service inferring iterable types in templates

This powerful new update is still in development but we wanted to share an update as we keep preparing it for a full release in an upcoming version.

Updated Hot Module Replacement (HMR) Support

Angular has offered support for HMR but enabling it required configuration and code changes making it less than ideal to quickly include in Angular projects. In version 11 we’ve updated the CLI to allow enabling HMR when starting an application with ng serve. To get started, run the following command:

ng serve --hmr

After the local server starts the latest the console will display a message confirming that HMR is active:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for webpack.

Now during development the latest changes to components, templates and styles will be instantly updated into the running application. All without requiring a full page refresh. Data typed into forms are preserved as well as scroll position providing a boost to developer productivity.

Faster Builds

We’re bringing a faster development and build cycle by making updates to some key areas.

  • When installing dependencies, the ngcc update process is now 2–4x faster.
  • Faster compilation with TypeScript v4.0.

Experimental webpack 5 Support

Now, teams can opt-in to webpack v5. Currently, you could experiment with module federation. In the future, webpack v5 will clear the path for:

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

Support is experimental and under development so we don’t recommend opting in for production uses.

Want to try out webpack 5? To enable it in your project, add the following section to your package.json file:

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

Currently, you’ll need to use yarn to test this as npm does not yet support the resolutions property.

Linting

In previous versions of Angular, we’ve shipped a default implementation for linting (TSLint). Now, TSLint is deprecated by the project creators who recommend migration to ESLint. James Henry together with other folks from the open-source community developed a third-party solution and migration path via typescript-eslint, angular-eslint and tslint-to-eslint-config! We’ve been collaborating closely to ensure a smooth transition of Angular developers to the supported linting stack.

We’re deprecating the use of TSLint and Codelyzer in version 11. This means that in future versions the default implementation for linting Angular projects will not be available.

Head over to the official project page for a guide to incorporate angular-eslint in a project and migrate from TSLint.

Housekeeping

In this update we’re removing support for IE9/IE10 and IE mobile. IE11 is the only version of IE still supported by Angular. We’ve also removed deprecated APIs and added a few to the deprecation list. Be sure to check this out to make sure you are using the latest APIs and following our recommended best practices.

Roadmap

We’ve also updated the roadmap to keep you posted on our current priorities. Some of the announcements in this post are updates on in-progress projects from the roadmap. This reflects our approach to incrementally rollout larger efforts and allows developers to provide early feedback that we can incorporate it into the final release.

We collaborated with Lukas Ruebbelke from the Angular community on updating the content of some of the projects to better reflect the value they provide to developers.

How to update to get version 11

When you are ready to go run this command to update Angular and CLI:

ng update @angular/cli @angular/core

Head over to update.angular.io to find detailed information and guidance on updating. We always recommend upgrading one major release at a time to have the best update experience.

We hope you enjoy this feature update and be sure to let us know what you think here or on Twitter!

Th original post Version 11 of Angular Now Available.