Written in June 28, 2025 by Antonio Cárdenas
Frontend Developer & GDE
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
1npm install @angular-devkit/build-angular --save-devThis 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.1or later - TypeScript: Version
5.8or 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:
1ng update @angular/cli @angular/coreIf you use Angular Material:
1ng update @angular/cli @angular/core @angular/materialManual intervention required
To reinstall the old compiler with Karma support:
1npm install @angular-devkit/build-angular --save-devThis wasn't required in earlier versions but is now mandatory if you want to keep using Karma.
Compared to earlier upgrades
- Angular v19:
ng updatejust 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
1<div *ngFor="let item of items; trackBy: trackItemById">{{ item.name }}</div>New syntax
1@for (item of items; track item.id) {
2<div>{{ item.name }}</div>
3} @empty {
4<div>No items to display.</div>
5}trackis mandatory and encourages best practices.@emptyimproves 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:
1ng generate @angular/core:control-flowGeneral Best Practices and Further Migrations
You can also migrate to other modern Angular features:
1ng generate @angular/core:standalone
2ng generate @angular/core:inject
3ng generate @angular/core:route-lazy-loading
4ng generate @angular/core:signal-input-migration
5ng generate @angular/core:signal-queries-migration
6ng generate @angular/core:output-migrationThese 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.
1mySignal.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
1user - profile.component.ts;
2auth.service.ts;
3highlight.directive.ts;New naming
1user - profile.ts; // UI component
2auth - store.ts; // state
3highlight.ts; // directiveFocus on intent instead of type
1user - api.ts; // HTTP requests
2auth - store.ts; // reactive state
3movie - card.ts; // UI component
4movie - details.ts; // UI componentNaming rules
- Use dashes:
user-profile.ts - Match class and filename
- Keep
.spec.tsfor tests - Avoid generic names like
utils.ts - Co-locate related files
Feature-based folder structure
1src/
2├── core/
3│ └── auth/
4│ ├── auth-store.ts
5│ ├── login.ts
6│ └── register.ts
7├── features/
8│ └── users/
9│ ├── user-profile.ts
10│ ├── user-api.ts
11│ └── user-settings.tsBenefits
- 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.