What’s new in Angular 11

Angular Version 11 release has updates across the platform including the framework, the CLI and components. Let’s dive in!

What’s in this release?

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.

Screenshot of angular CLI output nicely formatted into columns.

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.

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 console will display a message confirming that HMR is active:

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

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.

For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.

Content Source:

1. blog.angular.io