Lab 11: Migration vers la v21

📖 Ressources

• Guide de Migration v16 vers v21
• Guide de Mise à Jour Angular
• Composants Standalone

🚀 Code de Départ

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

Dans ce lab, vous allez explorer ce que signifie la migration d’Angular vers les composants standalone — en comparant l’architecture v16 basée sur NgModule avec l’équivalent v21 standalone fourni dans le starter. Vous comprendrez ce que ng update et ng generate @angular/core:standalone modifient, et vous appliquerez manuellement les transformations clés.

Pourquoi ne pas exécuter ng update @angular/core@21 directement ?

L’outil de mise à jour du CLI Angular ne supporte la mise à jour que d’une version majeure à la fois. Passer de v16 à v21 nécessite cinq exécutions séparées :

ng update @angular/core@17 @angular/cli@17
ng update @angular/core@18 @angular/cli@18
ng update @angular/core@19 @angular/cli@19
ng update @angular/core@20 @angular/cli@20
ng update @angular/core@21 @angular/cli@21

Dans un vrai projet, vous exécuteriez chaque étape, corrigeriez les avertissements de dépréciation et testeriez avant de continuer. Pour ce lab, le résultat migré est le prochain starter (step-15-album-wholesale-v21-post-signal-computed) — utilisez-le pour étudier ce qui a changé.

📝 Instructions

Étape 1 : Comparer les Deux Starters

Ouvrez les deux projets côte à côte :

• Avant (v16) : step-11-album-wholesale-v16-post-compodoc
• Après (v21) : step-15-album-wholesale-v21-post-signal-computed

Observez les différences structurelles clés.

Étape 2 : Comprendre le Changement de Bootstrap

v16 (src/main.ts) :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

v21 (src/main.ts) :

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

Étape 3 : Comprendre AppModule → app.config.ts

v16 (src/app/app.module.ts) :

@NgModule({
  declarations: [AppComponent, AlbumListComponent, ...],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    ReactiveFormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

v21 (src/app/app.config.ts) :

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations(),
  ]
};

Étape 4 : Comprendre les Composants Standalone

La migration automatique exécute :

ng generate @angular/core:standalone

Cela convertit chaque composant de :

// v16 — déclaré dans un module
@Component({ selector: 'app-album-list', ... })
export class AlbumListComponent { }

Vers :

// v21 — standalone, importe ses propres dépendances
@Component({
  selector: 'app-album-list',
  standalone: true,
  imports: [MatCard, NgFor, AsyncPipe, ...],
  ...
})
export class AlbumListComponent { }

Étape 5 : Comprendre les Guards Fonctionnels

v16 — guard basé sur une classe :

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    return inject(AuthService).isLoggedIn();
  }
}

v21 — guard fonctionnel :

export const authGuard: CanActivateFn = () => {
  return inject(AuthService).isLoggedIn();
};

Étape 6 : Vérifier que le Starter Migré Compile

cd step-15-album-wholesale-v21-post-signal-computed
npm install
ng build

C’est le résultat de la migration — tous les labs suivants (12–17) s’appuient dessus.