Angular 18 to Angular 19 Upgrade

Purpose

Upgrade an Angular application from Angular 18.x to Angular 19.x using a controlled major-hop process.

When to Use

• The project uses Angular 18.x.
• The target next hop is Angular 19.x.
• The Angular 17 -> 18 validation gate passed.
• Angular Material usage is known.
• NgModule and standalone usage is known.
• Router usage is known.
• Effects/signals usage is known.
• Test strategy is known.

When Not to Use

• The project is AngularJS 1.x.
• The project is Angular 17.x or lower.
• The project is already Angular 19 or later.
• The previous Angular 17 -> 18 validation gate failed.
• Angular Material v18 migration has unresolved critical blockers.
• The project has unknown NgModule/standalone status.
• Test behavior is unknown in a test-heavy project.
• Router error handling is unknown in a routing-heavy project.

Mandatory Cross-Skill Routing

Before upgrading from Angular 18 to Angular 19, run:

skills/angular/upgrades/changelog/angular-major-changelog-risk-review/SKILL.md

If the changelog review returns FAIL_BLOCK_NEXT_HOP, do not continue to Angular 19.

Recommended Cross-Skill Routing

• skills/angular/upgrades/standalone/angular-standalone-default-v19-ngmodule-compat/SKILL.md
• skills/angular/upgrades/testing/angular-v19-effects-and-fakeasync-scheduler/SKILL.md
• skills/angular/upgrades/router/angular-router-error-handler-v19/SKILL.md
• skills/angular/upgrades/components/angular-create-component-projectable-nodes-v19/SKILL.md
• skills/angular/upgrades/localize/angular-localize-builder-v19/SKILL.md

Required Inputs

• package.json
• lock file
• Angular package versions
• Angular CLI version
• Angular Material version
• Angular CDK version
• TypeScript version
• RxJS version
• Zone.js version
• Node.js version
• angular.json
• tsconfig.json
• tsconfig.app.json
• tsconfig.spec.json
• angularCompilerOptions
• strictStandalone
• NgModule declarations
• components/directives/pipes with standalone
• template reference variable usage
• BrowserModule.withServerTransition
• APP_ID
• KeyValueDiffers
• @angular/localize builder config
• ExperimentalPendingTasks
• PendingTasks
• signals/effects usage
• tests using fakeAsync
• tests using tick
• tests using flush
• tests using whenStable
• tests using autoDetectChanges
• custom elements usage
• createComponent usage
• projectableNodes
• components with fallback ng-content
• router usage
• Router.errorHandler
• withNavigationErrorHandler
• Resolve
• RedirectCommand
• current build/test/lint/e2e scripts
• production build scripts
• SSR/prerender scripts
• screenshot/golden tests

Dependency Upgrade

TypeScript

Angular 19 requires TypeScript 5.5 or later.

Angular Core and CLI

Run:

ng update @angular/core@19 @angular/cli@19

If local CLI is unreliable, use:

npx @angular/cli@19 update @angular/core@19 @angular/cli@19

Angular Material

If the project uses Angular Material, update to v19 after Angular core and CLI succeed.

ng update @angular/material@19

or:

npx @angular/cli@19 update @angular/material@19

Required Code Changes

1. Standalone by default

Angular 19 makes directives, components, and pipes standalone by default.

Existing NgModule-declared declarations must explicitly use standalone: false.

2. Remove this. from template reference variable access

Review templates that access template refs through this..

3. Replace BrowserModule.withServerTransition

Use APP_ID instead.

4. Remove KeyValueDiffers.factories

Remove all uses of KeyValueDiffers.factories.

5. Localize builder name to project

Update the @angular/localize builder config.

6. Rename ExperimentalPendingTasks to PendingTasks

Replace the old token with PendingTasks.

7. Effects timing changes

Review effects timing and DOM-dependent effect behavior.

8. fakeAsync pending timers flush by default

Review timer-dependent tests and use { flush: false } only when justified.

9. Hybrid scheduler timing

Review NgZone and fakeAsync timing assumptions.

10. createComponent and fallback ng-content

Pass projectable empty nodes where needed to avoid unintended fallback content.

11. Custom elements change detection timing

Review custom element timing-sensitive tests.

12. Router.errorHandler

Migrate to supported router error handling APIs.

13. ApplicationRef.tick errors in tests

Update tests that surface errors during ApplicationRef.tick.

14. Resolve includes RedirectCommand

Update resolver typing where needed.

Do

• Run the Angular 18 changelog review before changing package versions.
• Keep standalone, tests, router, and dynamic component behavior explicit.
• Validate production and SSR builds when they are used.
• Route risky test, router, and component behavior to the dedicated skills.
• Keep Material/MDC validation explicit if Material is used.

Do Not

• Do not continue if Angular 18 changelog review failed.
• Do not migrate all NgModules to standalone during this hop.
• Do not keep BrowserModule.withServerTransition().
• Do not keep KeyValueDiffers.factories.
• Do not keep Router.errorHandler.
• Do not mix control flow, defer, zoneless, or signals modernization into the hop.

Review Checklist

• Angular 18 changelog review passed.
• TypeScript 5.5+ is compatible.
• Standalone declarations are explicit where needed.
• Template reference variables do not use this..
• APP_ID replaces server transition usage.
• KeyValueDiffers.factories is removed.
• Localize builder uses project.
• PendingTasks replaces ExperimentalPendingTasks.
• Effects and fakeAsync timing are reviewed.
• Dynamic component projection is reviewed.
• Router error handling is migrated.
• Resolve typing includes RedirectCommand.
• Material/MDC regression risk is reviewed.
• Production build passes.

Validation

Run only existing scripts:

• npm run build
• npm run test
• npm run lint
• npm run e2e
• ng build --configuration production
• npm run build:ssr
• npm run prerender
• npm run serve:ssr

Validation Gate

Use FAIL_BLOCK_NEXT_HOP when:

• Angular 18 changelog risk review failed
• TypeScript version is unsupported
• build fails
• tests fail
• production build fails
• Angular CLI update is incomplete
• Angular Material update is incomplete in a Material project
• NgModule declarations are missing explicit standalone: false
• standalone migration breaks declarations or imports
• template reference variables still use this.
• BrowserModule.withServerTransition() remains
• KeyValueDiffers.factories remains
• @angular/localize builder still uses name
• ExperimentalPendingTasks remains
• effect timing tests fail
• fakeAsync timing failures are unresolved
• hybrid scheduler timing tests are unresolved
• dynamic components render unintended fallback content
• custom elements timing tests fail
• Router.errorHandler remains
• ApplicationRef.tick test errors are unresolved
• Resolve typing does not account for RedirectCommand
• Material/style regressions are unreviewed
• SSR behavior is unvalidated in SSR apps
• workspace config is unstable

Expected Output

1. Upgrade summary.
2. Changelog baseline summary.
3. Standalone, testing, router, and component migration summary.
4. Validation result.
5. Gate decision.

Exit Criteria

• Angular 18 changelog review has passed.
• Angular dependencies are upgraded to Angular 19-compatible versions.
• Angular CLI is upgraded to v19.
• Angular Material/CDK are upgraded to v19 only if used.
• TypeScript 5.5+ compatibility is confirmed.
• Standalone defaults are validated.
• Testing and scheduler behavior is reviewed.
• Router error handling is reviewed.
• Dynamic component projection is reviewed.
• Localize builder is updated when used.
• Angular Material and style regressions are reviewed.
• Validation gate result is explicit.
• The next hop is not started automatically.