Step-by-Step Guide: Upgrading Angular 12 to Angular 19

Upgrading Angular projects across multiple major versions can feel daunting, but with a structured approach, you can move safely from Angular 12 all the way to Angular 19. This guide walks you through each phase, ensuring your environment is set up correctly and your project remains stable at every step.

PHASE 0 — Environment Setup (Mandatory)

0.1 Install Node Version Manager (Windows)

Use nvm-windows to manage Node versions easily.

Open Command Prompt as Administrator.

0.2 Install & Use Node 16

Copynvm install 16
nvm use 16
node -v

✔ Must show v16.x.x

0.3 Clean Project & Verify Angular 12 Works

Copycd angular-12-crud-master\angular-12-crud-master
rd /s /q node_modules
del package-lock.json
npm cache clean --force
npm install
npx ng serve

✔ App must run before upgrading.

PHASE 1 — Angular Upgrades (One Version at a Time)

Upgrade step by step, committing after each successful run.

Angular 12 → 13

Copynpx ng update @angular/core@13 @angular/cli@13
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 12 to 13"

Angular 13 → 14

Copynpx ng update @angular/core@14 @angular/cli@14
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 13 to 14"

Angular 14 → 15

Copynpx ng update @angular/core@15 @angular/cli@15
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 14 to 15"

PHASE 2 — Switch Node Version (Important)

Angular 16+ requires Node 18.

Switch to Node 18

Copynvm install 18
nvm use 18
node -v

✔ Must show v18.x.x

Angular 15 → 16

Copynpx ng update @angular/core@16 @angular/cli@16
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 15 to 16"

Angular 16 → 17

Copynpx ng update @angular/core@17 @angular/cli@17
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 16 to 17"

Angular 17 → 18

Copynpx ng update @angular/core@18 @angular/cli@18
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 17 to 18"

Angular 18 → 19

Copynpx ng update @angular/core@19 @angular/cli@19
npm install
npx ng serve
git add .
git commit -m "Upgrade Angular 18 to 19"

PHASE 3 — Final Cleanup (Optional but Recommended)

Remove old Angular CLI global versions:

Copynpm uninstall -g @angular/cli
npm install -g @angular/cli@19

Verify Final State

Run:

Copyng version

✅ Expected Final State:

CopyItem           Value

Angular        19.x

Node           18.x

RxJS           7.x

TypeScript     5.x

zone.js        0.14+

Build tool     ESBuild/Vite

Troubleshooting

If something fails:

Copyrm -rf node_modules
del package-lock.json
npm install
npx ng serve

🎯 Next Steps

Once you're safely on Angular 19, you can:

• Modernize to standalone APIs
• Add signals
• Replace *ngIf with @if
• Optimize builds with ESBuild/Vite

By following this phased approach, you ensure smooth upgrades without breaking your project. Never jump ahead — stability at each step is key!

Author: Amirsuhail