Upgrading to Angular 20
This is a practical guide focused on what really matters when updating a real-world application: what breaks, what makes your work easier, and how you should adapt your development style.
1. The Full Story Behind Karma's Removal: Beyond a Broken Build
The immediate issue when upgrading is that ng test
will fail. The reason is a fundamental change in Angular's build tools.
Why did Angular drop Karma?
With Angular 20, the default build package changes from @angular-devkit/build-angular
to the new @angular/build
. This new package no longer includes the Karma plugin used by legacy test setups.
The web ecosystem has moved on to faster test runners like Vitest and Jest that use modern tools like Vite and esbuild. Karma had become a bottleneck.
What the new world looks like (Vitest/Jest)
Angular's experimental test runner, now powered by Vitest, is the future. Migrating means your unit tests will run in a fast, modern Node.js-based environment.
The "temporary fix" explained
npm install @angular-devkit/build-angular --save-dev
This command forces the CLI to fall back to the old compiler that still supports Karma. It’s a compatibility bridge — but the message is clear: start planning your migration to Jest or Vitest soon.
2. Prerequisites
Before starting the update process, make sure you meet the following:
- Node.js: Version
20.11.1
or later - TypeScript: Version
5.8
or later - Project backup: Commit all current changes in Git
3. How to Update: CLI Command and Comparison
Update Command
Make sure you're running Node.js v20.11.1
or later:
ng update @angular/cli @angular/core
If you use Angular Material:
ng update @angular/cli @angular/core @angular/material
Manual intervention required
To reinstall the old compiler with Karma support:
npm install @angular-devkit/build-angular --save-dev
This wasn't required in earlier versions but is now mandatory if you want to keep using Karma.
Compared to earlier upgrades
- Angular v19:
ng update
just worked. - Angular v20: You must manually reinstall the old builder for Karma.
4. Control Flow: More Than Syntactic Sugar
@for
replaces *ngFor
and is a major improvement.
Old syntax
<div *ngFor="let item of items; trackBy: trackItemById"> {{ item.name }} </div>
New syntax
@for (item of items; track item.id) { <div>{{ item.name }}</div> } @empty { <div>No items to display.</div> }
track
is mandatory and encourages best practices.@empty
improves DX by removing the need for separate@if
.
Automated migration and performance
Use the CLI to automatically refactor templates to the new control flow syntax:
ng generate @angular/core:control-flow
General Best Practices and Further Migrations
You can also migrate to other modern Angular features:
ng generate @angular/core:standalone ng generate @angular/core:inject ng generate @angular/core:route-lazy-loading ng generate @angular/core:signal-input-migration ng generate @angular/core:signal-queries-migration ng generate @angular/core:output-migration
These commands allow for a comprehensive update of an Angular app to leverage the latest patterns.
5. Standalone by Default: A Fundamental Architectural Shift
By explicitly listing dependencies using the imports
array at the component level, each component becomes self-contained. This:
- Clarifies your architecture
- Improves tree-shaking
- Results in smaller bundles
6. Zoneless: Escaping the "Magic" of Change Detection
In a zone-less world, the UI only updates when you explicitly tell it to.
Signals are the main tool here.
mySignal.set(newValue);
This directly tells Angular to update only the DOM parts that use that signal. It’s a surgical, predictable, and high-performance approach.
7. New Naming Convention: Why It Feels Complicated
Angular 20 introduces a new official naming convention that drops traditional suffixes.
Old naming
user-profile.component.ts auth.service.ts highlight.directive.ts
New naming
user-profile.ts // UI component auth-store.ts // state highlight.ts // directive
Focus on intent instead of type
user-api.ts // HTTP requests auth-store.ts // reactive state movie-card.ts // UI component movie-details.ts // UI component
Naming rules
- Use dashes:
user-profile.ts
- Match class and filename
- Keep
.spec.ts
for tests - Avoid generic names like
utils.ts
- Co-locate related files
Feature-based folder structure
src/
├── core/
│ └── auth/
│ ├── auth-store.ts
│ ├── login.ts
│ └── register.ts
├── features/
│ └── users/
│ ├── user-profile.ts
│ ├── user-api.ts
│ └── user-settings.ts
Benefits
- Cleaner Git diffs
- Intention-oriented code
- Easier onboarding
8. Important Detail: browserslist
and Browser Support
Angular 20 no longer supports Opera officially.
If you list Opera in your browserslist
, you may need to remove it.
Other non-mainstream browsers may also lose support, potentially triggering warnings or build issues.