What is new updates in Angular 11?

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 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.

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.

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 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. The ng lint command will function similarly to ng deploy, suggesting recommended implementations developers could add to their projects.

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