Angular 14: end of life and how to upgrade

Angular 14 introduced standalone components in developer preview and typed reactive forms. It has been unsupported since November 2023.

Release and support dates

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

What Angular 14 introduced

• Standalone components in developer preview. With standalone: true, components, directives and pipes declare their own imports without an NgModule.
• Typed reactive forms. FormControl, FormGroup and FormArray carry the types of their values. Existing forms are migrated to Untyped classes so the change can be gradual.
• Page titles in the router with Route.title and a custom TitleStrategy.
• Extended diagnostics that warn about common template mistakes, such as inverted two-way binding brackets.
• Binding to protected component members from templates.
• CLI additions: ng completion, ng cache and ng analytics. Flags are accepted in lower kebab case only.
• CDK Menu and Dialog promoted to stable.
• An experimental esbuild-based builder.
• Support for TypeScript 4.7 and ES2020 as the default target.

What needs attention when you upgrade

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.
• The compiler prefixes @keyframes names with the component scope, which breaks TypeScript code that relies on those names.
• Angular Material 15 is based on MDC. The DOM and the CSS classes of many components change. The previous components remain available through legacy imports.
• providedIn: 'any', providedIn with an NgModule and RouterLinkWithHref are deprecated.

From 15 to 16:

• Node.js 16.14 or 18.10 and later, TypeScript 4.9.3 or later and Zone.js 0.13 or later are required.
• ngcc is removed, so libraries compiled with View Engine no longer work.
• These APIs are removed: entryComponents, ANALYZE_FOR_ENTRY_COMPONENTS, ReflectiveInjector, renderModuleFactory and BrowserTransferStateModule.
• XhrFactory must be imported from @angular/common.
• Tests get MockPlatformLocation by default.
• ngTemplateOutletContext has stricter type checking.

A short upgrade approach

1. Update to the latest 14.x patch, confirm that the build and the tests pass, and commit.
2. List every third-party library and check whether it was published for Ivy. This list decides how hard v16 will be.
3. Run ng update @angular/core@15 @angular/cli@15, then ng update @angular/material@15.
4. Review the screens that use Angular Material and fix the style overrides. Use the legacy imports only as a temporary measure.
5. Update third-party libraries, fix deprecations, run the tests and release.
6. Repeat for the next major. The next stop is Angular 15.

When it is worth getting help

The two steps after v14 bring two large changes: MDC-based Material components in v15 and the removal of ngcc in v16. Help is worth it if the design relies on customized Material components, if key libraries have no Ivy release, or if the team wants to adopt standalone components as part of the same effort. The plan is in Angular upgrade strategy for old versions.

More in this section

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