25 — Migration & Version Updates
Angular Release Cycle
| Type | Frequency | Example |
|---|
| Major | Every 6 months | 17 → 18 → 19 |
| Minor | Monthly | 17.1 → 17.2 |
| Patch | Weekly | 17.2.0 → 17.2.1 |
| LTS | 18 months support per major | v16 LTS until Nov 2024 |
ng update — Official Update Tool
# Check what needs updating
ng update
# Update Angular core + CLI
ng update @angular/core @angular/cli
# Update Angular Material
ng update @angular/material
# Update with specific version
ng update @angular/core@18 @angular/cli@18
# Force update (skip peer dependency checks)
ng update @angular/core --force
# Allow version jump
ng update @angular/core --allow-dirty
Update Steps (Safe Process)
# 1. Create a branch
git checkout -b update/angular-18
# 2. Run update
ng update @angular/core @angular/cli
# 3. Fix any breaking changes (ng update shows migration notes)
# 4. Update other dependencies
ng update @angular/material # If using Material
npm outdated # Check other deps
# 5. Run tests
ng test
ng e2e
# 6. Build
ng build --configuration=production
# 7. Commit and PR
git add -A
git commit -m "chore: update Angular to v18"
Key Migration Guides
Angular 16 → 17
| Change | Action |
|---|
| Standalone by default | New components are standalone; migrate existing with ng g @angular/core:standalone |
| New control flow | Replace *ngIf → @if, *ngFor → @for, *ngSwitch → @switch |
@defer blocks | Use for lazy-loading template sections |
| esbuild (default) | Faster builds; check for webpack-specific config |
| View Transitions | Add withViewTransitions() to router |
# Auto-migrate to standalone
ng generate @angular/core:standalone
# Auto-migrate to new control flow
ng generate @angular/core:control-flow
Angular 17 → 18
| Change | Action |
|---|
| Stable signals | Move from @Input() to input(), @Output() to output() |
@let in templates | Declare local template variables |
| Zoneless (experimental) | Opt in with provideExperimentalZonelessChangeDetection() |
| Route redirects | redirectTo function support |
| Material 3 | Update theming to M3 APIs |
Angular 18 → 19
| Change | Action |
|---|
| Incremental hydration | Use @defer (hydrate on ...) for SSR |
| Linked signals | Use linkedSignal() for dependent writable signals |
| Resource API | Use resource() for async data loading |
| Standalone default | standalone: true no longer needed (it's the default) |
| Strict standalone | Components without standalone: false are standalone |
Auto-Migration Schematics
# Migrate to standalone components
ng generate @angular/core:standalone
# Migrate to new control flow (@if, @for, @switch)
ng generate @angular/core:control-flow
# Migrate to signal inputs
ng generate @angular/core:signal-input
# Migrate to signal queries (ViewChild → viewChild)
ng generate @angular/core:signal-queries
# Migrate outputs
ng generate @angular/core:output-migration
# Migrate to inject() function
ng generate @angular/core:inject-migration
# Remove unnecessary standalone: true (Angular 19+)
ng generate @angular/core:standalone-migration
Common Breaking Changes to Watch
| Area | Common Issue | Fix |
|---|
| RxJS | Deprecated operators removed | Use new imports from rxjs |
| HttpClient | HttpModule → provideHttpClient() | Update providers |
| Router | CanActivate class → CanActivateFn | Use functional guards |
| Forms | Typed forms (Angular 14+) | Add generics to FormGroup |
| Material | Theme API changes | Update SCSS imports |
| TypeScript | Stricter checks in new TS versions | Fix type errors |
| Node.js | Minimum version bumps | Update Node.js |
Handling Deprecated APIs
// ❌ Deprecated in Angular 15
@NgModule({
providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
})
// ✅ Modern (Angular 15+)
provideHttpClient(withInterceptors([authInterceptor]))
// ❌ Deprecated
canActivate: [AuthGuard] // Class-based guard
// ✅ Modern
canActivate: [authGuard] // Functional guard
// ❌ Deprecated (RxJS)
import { map } from 'rxjs/operators';
// ✅ Modern (RxJS 7.2+)
import { map } from 'rxjs';
Staying Updated
# Check Angular update guide
# https://angular.dev/update-guide
# Check current Angular version
ng version
# Check for updates
ng update
# Check npm outdated
npm outdated
# Check Angular blog for release announcements
# https://blog.angular.dev/
Version Compatibility Matrix
| Angular | TypeScript | Node.js | RxJS |
|---|
| 19 | 5.5–5.7 | 20, 22 | 7.x |
| 18 | 5.4–5.5 | 18, 20, 22 | 7.x |
| 17 | 5.2–5.4 | 18, 20 | 7.x |
| 16 | 4.9–5.1 | 16, 18 | 7.x |
Key Takeaways
- Update Angular one major version at a time — don't skip versions
- Always use
ng update — it runs migration schematics that auto-fix breaking changes
- Create a branch for updates — test thoroughly before merging
- Run auto-migration schematics for standalone, control flow, signals, and inject()
- Check the Angular Update Guide for version-specific steps
- Keep TypeScript and Node.js versions aligned with Angular's compatibility matrix
- Subscribe to Angular blog releases to stay ahead of deprecations