Lab 11: Migration to v21

📖 Resources

• Migration Guide v16 to v21
• Angular Update Guide
• Standalone Components

🚀 Starter Code

step-11-album-wholesale-v16-post-compodoc

In this lab, you'll migrate your Angular application from v16 to v21. You'll use the Angular CLI update command, run automated migrations to standalone components, update the bootstrap process in main.ts, and convert class-based guards to functional guards.

📝 Instructions

Step 1: Update Angular CLI

ng update @angular/core@21 @angular/cli@21

Step 2: Migrate to Standalone

Run automatic migration:

ng generate @angular/core:standalone

This converts components to standalone automatically.

Step 3: Update Bootstrap

Replace app.module.ts with bootstrapApplication() in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Step 4: Update Guards

Convert class-based guards to functional:

// Before
export class AuthGuard implements CanActivate { }

// After
export const authGuard: CanActivateFn = (route, state) => {
  return inject(AuthService).isLoggedIn();
};