Angular 13: end of life and how to upgrade

Angular 13 removed View Engine and dropped IE11. It has been unsupported since May 2023, nine majors behind the current version.

Release and support dates

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

What Angular 13 introduced

• View Engine removed. Ivy became the only compiler and runtime.
• A modernized Angular Package Format. Older output formats and View Engine metadata were removed, the output moved to ES2020 and packages gained Node package exports. Libraries built with the new format no longer need ngcc.
• Simpler dynamic components. ViewContainerRef.createComponent works without injecting ComponentFactoryResolver.
• IE11 support removed, which also removed the need for differential loading.
• A persistent build cache, enabled by default for new projects.
• RxJS 7.4 for new apps and support for TypeScript 4.4.
• TestBed teardown by default. The test module and the DOM are cleaned after every test.
• Inlining of Adobe Fonts, and accessibility improvements in Angular Material.

What needs attention when you upgrade

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 and UntypedFormControl, so nothing breaks and you add types gradually.
• initialNavigation: 'enabled' becomes 'enabledBlocking'.
• pathMatch has a stricter type.
• aotSummaries is removed from TestBed.
• In Angular Material, MatVerticalStepper and MatHorizontalStepper are replaced by MatStepper.

From 14 to 15:

• Node.js 14.20, 16.13 or 18.10 and later are required, with TypeScript 4.8 or later.
• enableIvy must be removed from tsconfig.json.
• Base classes whose constructors use dependency injection need an @Injectable or @Directive decorator.
• setDisabledState is always called when a ControlValueAccessor is attached.
• relativeLinkResolution is no longer configurable in the router.
• Angular Material 15 is based on MDC. The DOM and the CSS classes of many components change, so custom style overrides need a visual review.

A short upgrade approach

1. Update to the latest 13.x patch, confirm that the build and the tests pass, and commit.
2. Run ng update @angular/core@14 @angular/cli@14, then ng update @angular/material@14 if you use Material.
3. Let the forms migration switch to the Untyped classes. Add real types later, form by form.
4. Decide whether to move from RxJS 6 to RxJS 7 now. Angular 13 and later accept both.
5. Update third-party libraries, fix deprecations, run the tests and release.
6. Repeat for the next major. The next stop is Angular 14.

When it is worth getting help

From v13 a large share of the cost sits in the user interface and the libraries. Help is worth it if the app overrides the internal styles of Angular Material in many places, because the MDC change in v15 touches all of them. It is also worth it if the app has many large forms, or if it shares component libraries with other apps that must move at the same time. The plan for a long upgrade is in Angular upgrade strategy for old versions.

More in this section

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