Oh it looks like Angular 11.0.0 is here now, it bring us a lot of great new updates and features for angular developers, this version has new features across the platform including the framework itself, the CLI and components, so let's see and dive into those new features.

In general, the angular team release a major release every 6 months 1-3 minor release for each major release and a patch release and pre-release (next or rc) build almost every week. that means that the angular team are very active.

What’s in Angular 11 ?

in this new version of angular they are fixing a lot of issues including:

  • few popular issues in the router and forms.
  • closed the third most popular issue!
  • support the Angular community.
  • continue triaging and fixing issues.
  • improving the processes for accepting community contributions.
  • Improving the performances of the framework.
  • performance improvements and new APIs.
  • Improved Reporting and Logging
  • Updated Language Service Preview
  • Updated Hot Module Replacement (HMR) Support
  • Faster Builds
  • Experimental webpack 5 Support
  • Linting
  • Housekeeping

Automatic Inlining of Fonts

Angular 11 introduce automatic font inlinnig, that means during compile time Angular CLI will download and inline fonts that are being used and linked in the application. this becomes a default behaviour in apps built with angular 11, so if you want to take and benifate from this advantage all what you need to do is to update your angular app to angular 11.

Component Test Harnesses

In term of tests we all knew that angular team has introduced Component Test Harnesses in Angular 9 in which 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.

So now in angular 11 harness is available fot all the components, that will let developers to create robust test suites easily.

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.

Improved Reporting and Logging

Angular 11 has a lot of improvements in the new CLI output to make logs and reports easier to read. the logs are more clear to read and you can see more about the different generated files all in a good presented way.

Updated Language Service Preview

To make development with angular productive and fun we have the angular team has introduced the Angular Language Service provides helpful tools. The previous versions of the language service is based on View Engine and from now and on we have 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

In version 11 they’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 this will helps developers working on the local server when for example they have a large form and they filled it with some data when they make a change in the code only they have changed will be updated and the will not lost the data in the form.

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

What makes a developer happy more then a fastest framework, Angular 11 brings a faster development and build cycle by making updates to some key areas:

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

Experimental webpack 5 Support

Now you can play around Webpack v5 that will let you make faster builds with persistent disk caching and smaller bundles thanks to cjs tree-shaking.

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

TSLint will no lower be a part of angular framework, the angular team is encouraging 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.

Housekeeping

In this new version of angular 11 they have been removing support for IE9/IE10 and IE mobile. IE11 is the only version of IE still supported by Angular. They’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

Angular team has 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.

How to update to to angular version 11

If you're convinced to use angular 11 you can 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.