Angular 12: end of life and how to upgrade

Angular 12 deprecated View Engine and was the last major that supported IE11. It has been unsupported since November 2022.

Release and support dates

Angular 12 was released in May 2021. Active support ended in November 2021 and long-term support ended in November 2022. The Angular team pointed projects that still needed IE11 to v12, and that support window is now closed. The dates for every major are in Angular version support and end of life.

What Angular 12 introduced

• View Engine deprecated. Libraries built with View Engine kept working in Ivy apps, and library authors were asked to plan the move to Ivy.
• The Ivy-based language service on by default.
• Nullish coalescing (??) in templates.
• Production builds by default. ng build defaults to production, and strict mode is the CLI default.
• Webpack 5 ready for production, and TypeScript 4.2.
• Styling changes. Inline Sass in the styles field of a component, and Tailwind CSS support (added in v11.2).
• Angular Material on the Sass module system, with a new @use API. Projects must use sass and drop node-sass.
• Protractor left out of new projects while the team decided its future.
• A migration tool for legacy i18n message IDs.
• IE11 deprecated, with removal announced for v13.

What needs attention when you upgrade

From 12 to 13:

• View Engine is removed, and IE11 support is removed.
• TypeScript 4.4 and Node.js 12.20 or later are required.
• The string form of loadChildren is removed. Lazy routes need a dynamic import().
• TestBed tears down the test module after each test by default.
• The available and activated observables of SwUpdate are deprecated.
• RxJS stays on v6 unless you update it. New v13 apps start on RxJS 7.4.

From 13 to 14:

• TypeScript 4.6 and Node.js 14.15 or later are required.
• Forms become typed. ng update replaces the form classes with untyped versions such as UntypedFormGroup, so the app compiles and you add types later.
• initialNavigation: 'enabled' becomes 'enabledBlocking'.
• pathMatch has a stricter type, so some route arrays need an explicit Routes type.
• Resolvers take the first value an observable emits.
• The CLI only accepts flags in lower kebab case.

A short upgrade approach

1. Update to the latest 12.2.x patch, confirm that the build and the tests pass, and commit.
2. Confirm that no customer depends on IE11 before leaving v12.
3. Run ng update @angular/core@13 @angular/cli@13, then ng update @angular/material@13 if you use Material.
4. Convert string loadChildren routes and fix the tests that fail with the new TestBed teardown.
5. Update third-party libraries, run the tests and release.
6. Repeat for the next major. The next stop is Angular 13.

When it is worth getting help

Ten majors separate v12 from the current version. Help is worth it if the app still has IE11 workarounds and polyfills spread through the code, if it uses libraries that were never published for Ivy, or if the upgrade has been postponed several times already. The plan for a long upgrade is in Angular upgrade strategy for old versions.

More in this section

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