내 Angular 21 업그레이드가 실패한 이유 👀

Build tool lag causing misleading errors

I believe Angular upgrades have become much smoother these days. Most of the time, a simple ng updateis enough to move to the latest version.

Instead, I spent hours chasing errors that looked completely unrelated to the real problem 😭

After upgrading the project to Angular 21, I started seeing errors like these:

Cannot find module '@angular/material/chips'
Cannot find module '@angular/material/dialog'

Enter fullscreen mode Exit fullscreen mode

Then another one appeared:

Error: The current version of "@angular/build" supports Angular ^19...
but detected Angular version 21.x instead.

Enter fullscreen mode Exit fullscreen mode

At first, it looked like Angular Material wasn’t installed correctly but i think the actual issue was a version mismatch inside the project.

Some packages had already been upgraded to Angular 21:

• @angular/core
• @angular/common
• @angular/material

But the build system was still using:

@angular-devkit/build-angular@19

Enter fullscreen mode Exit fullscreen mode

Since Angular’s build tools are tightly coupled with the framework version, the compiler started producing misleading errors.

The build pipeline was the problem.

The Commands That Helped

I used these commands:

npm ls @angular-devkit/build-angular

Enter fullscreen mode Exit fullscreen mode

npm explain @angular-devkit/build-angular

Enter fullscreen mode Exit fullscreen mode

They showed that my project was still resolving Angular 19’s build package. That was the clue I needed and than I verified that every Angular package was using the same major version.

Then I cleaned the project completely:

rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install

Enter fullscreen mode Exit fullscreen mode

It takes time usually.(and I did it several times cause Im failed 😃)

Finally, I confirmed that all Angular packages were aligned before building again.