Angular 11: end of life and how to upgrade

Angular 11 added font inlining, simpler hot module replacement and the first step away from TSLint. It has been unsupported since May 2022.

Release and support dates

Angular 11 was released in November 2020. Active support ended in May 2021 and long-term support ended in May 2022. It receives no security patches today. The dates for every major are in Angular version support and end of life.

What Angular 11 introduced

• Automatic font inlining. The CLI downloads and inlines the fonts linked in the application at build time.
• Test harnesses for every Angular Material component.
• Simpler HMR. Hot module replacement starts with ng serve --hmr, with no extra configuration.
• Faster builds, with a quicker ngcc step and TypeScript 4.0.
• Experimental webpack 5 support. The team did not recommend it for production in this version.
• TSLint and Codelyzer deprecated. The announcement pointed to angular-eslint as the migration path.
• IE9, IE10 and IE Mobile removed. IE11 was the only Internet Explorer version still supported.
• A preview of the Ivy-based language service.

What needs attention when you upgrade

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.
• ng build produces a production build by default in new projects, and strict mode becomes the CLI default.
• Projects that use Angular Material must switch from node-sass to the sass package.
• Apps with translations should move away from legacy i18n message IDs with the migration tool.
• New projects no longer include Protractor.
• IE11 support is deprecated.

From 12 to 13:

• View Engine is removed. Everything compiles with Ivy.
• IE11 support is removed. ng update drops the IE-specific polyfills.
• TypeScript 4.4 and Node.js 12.20 or later are required.
• Lazy routes can no longer use the string form of loadChildren. They need a dynamic import().
• TestBed tears down the test module after each test by default, which can expose tests that depended on leftover state.
• RxJS 7.4 is the default for new apps. Existing apps stay on RxJS 6 until you update it yourself.

A short upgrade approach

1. Update to the latest 11.2.x patch, confirm that the build and the tests pass, and commit.
2. Move local machines and CI to Node 12.14 or 14.15 and later.
3. Run ng update @angular/core@12 @angular/cli@12, then ng update @angular/material@12 if you use Material.
4. Replace TSLint with ESLint as a separate change before you move on.
5. Update third-party libraries, fix deprecations, run the tests and release.
6. Repeat for the next major. The next stop is Angular 12.

When it is worth getting help

The step that deserves planning from v11 is v13, because it removes both View Engine and IE11. Help is worth it if customers still use IE11, if the e2e suite runs on Protractor, or if the app is one of several that share libraries and must move together. The order of work is in Angular upgrade strategy for old versions.

More in this section

• 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
• Angular 15: end of life and how to upgrade