Angular 10: end of life and how to upgrade

Angular 10 was a small release that arrived four months after v9. It has been unsupported since December 2021, twelve majors behind the current version.

Release and support dates

Angular 10 was released in June 2020. Active support ended in December 2020 and long-term support ended in December 2021. It no longer receives security patches. All versions are listed in Angular version support and end of life.

What Angular 10 introduced

The Angular team described this release as smaller than usual. The headline changes were:

• A date range picker in Angular Material.
• Warnings for CommonJS imports. The build warns when a dependency is packaged as CommonJS, because those bundles limit optimization.
• Optional stricter settings. ng new --strict enables strict TypeScript, strict template type checking and lower bundle budgets.
• Dependency updates. TypeScript 3.9, tslib 2.0 and TSLint 6.
• A new default browser configuration for new projects, which disables ES5 builds unless you list the browsers that need them in .browserslistrc.
• Smaller packages. The Angular Package Format no longer includes ESM5 or FESM5 bundles.
• Deprecation of IE 9, IE 10 and Internet Explorer Mobile.

What needs attention when you upgrade

From 10 to 11:

• TypeScript 4.0 is required.
• Support for IE9, IE10 and IE Mobile is removed.
• Router: relativeLinkResolution defaults to corrected, preserveQueryParams is removed and the old initialNavigation values are removed.
• ViewEncapsulation.Native is removed. Use ViewEncapsulation.ShadowDom.
• Provider overrides through TestBed.overrideProvider after TestBed initialization are no longer applied.
• @angular/platform-webworker is removed.
• TSLint and Codelyzer are deprecated in v11.

From 11 to 12:

• TypeScript 4.2 is required, and Node.js 10 is no longer supported.
• XhrFactory moves from @angular/common/http to @angular/common.
• IE11 support is deprecated.
• ng build produces a production build by default. An optional migration applies this to existing projects.
• Angular Material and the CDK adopt the Sass module system. Projects must use the sass package and drop node-sass.
• min and max attributes on number inputs now trigger form validation.

A short upgrade approach

1. Update to the latest 10.2.x patch, confirm that the build and the tests pass, and commit.
2. Run ng update @angular/core@11 @angular/cli@11, then ng update @angular/material@11 if you use Material.
3. Update third-party libraries to releases that support Angular 11.
4. Fix compile errors and deprecation warnings, run the tests and release.
5. Move the build machines to Node 12 or 14 before the step to v12.
6. Repeat for each major. The next stop is Angular 11.

When it is worth getting help

Twelve consecutive upgrades are routine work when the app has tests and current libraries. They become a project when it does not. Help is worth it if the app still targets Internet Explorer, if linting and e2e tests depend on TSLint and Protractor, or if nobody on the team has done a multi-version upgrade before. The full plan is in Angular upgrade strategy for old versions. For a large product owned by several teams, compare the options in Rewrite, hybrid or micro-frontends.

More in this section

• Angular 11: end of life and how to upgrade
• Angular 12: end of life and how to upgrade
• Angular 13: end of life and how to upgrade
• Angular 14: end of life and how to upgrade