L'avenir d'Angular

Angular ne cesse d’évoluer - comme un samouraï qui perfectionne son art tout au long de sa vie.

Angular zoneless (Angular 18+)

1// app.config.ts
2import { provideExperimentalZonelessChangeDetection } from '@angular/core';
3
4export const appConfig: ApplicationConfig = {
5  providers: [
6    provideExperimentalZonelessChangeDetection()
7  ]
8};
9
10// Components must use Signals or manual markForCheck
11@Component({
12  selector: 'app-counter',
13  template: `
14    <p>Count: {{ count() }}</p>
15    <button (click)="increment()">+1</button>
16  `
17})
18export class CounterComponent {
19  count = signal(0);
20
21  increment(): void {
22    this.count.update(c => c + 1);
23  }
24}

Voici la version d'Angular 19, où la fonction porte encore Experimental dans son nom. Angular 20 l'a renommée provideZonelessChangeDetection() (stable depuis la 20.2), et depuis Angular 21 le mode sans zone.js est celui par défaut. Vérifie donc la version dans package.json : avec Angular 19 tu écris provideExperimentalZonelessChangeDetection(), avec les versions suivantes provideZonelessChangeDetection().

Signals - Intégration complète

1// Angular 19+ features
2import { signal, computed, effect, linkedSignal, resource } from '@angular/core';
3
4@Component({...})
5export class FutureComponent {
6  // linkedSignal - resets when source changes
7  userId = input.required<number>();
8  selectedTab = linkedSignal({ source: this.userId, computation: () => 'profile' });  // Se réinitialise quand userId change
9
10  // resource() - declarative data fetching
11  userResource = resource({
12    request: () => this.userId(),
13    loader: async ({ request: id }) => {
14      const response = await fetch(`/api/users/${id}`);
15      return response.json();
16    }
17  });
18
19  // La valeur précédente vient de linkedSignal (computed() ne la reçoit pas)
20  count = signal(0);
21  changes = linkedSignal<number, { current: number; previous: number }>({
22    source: this.count,
23    computation: (current, prev) => ({ current, previous: prev?.value.current ?? 0 })
24  });
25}

Hydratation partielle (expérimental)

1// Selective hydration - only interactive parts
2@Component({
3  template: `
4    <!-- Static content - no JS needed -->
5    <header>{{ title }}</header>
6
7    <!-- Hydration on interaction -->
8    @defer (hydrate on interaction) {
9      <app-interactive-widget />
10    }
11
12    <!-- Hydration when visible -->
13    @defer (hydrate on viewport) {
14      <app-comments />
15    }
16  `
17})
18export class HybridComponent {}

esbuild et Vite (Angular 17+)

Depuis Angular 17, les nouveaux projets utilisent le builder application : esbuild construit les bundles de production, et Vite sert uniquement de serveur de développement avec ng serve. Depuis Angular 18, ce builder existe aussi dans un package séparé, @angular/build, comme dans cet exemple :

1// angular.json - builder application : esbuild construit les bundles, Vite ne fait que servir l'application avec ng serve
2{
3  "architect": {
4    "build": {
5      "builder": "@angular/build:application"
6    }
7  }
8}

Bonnes pratiques dans Angular 19

1. Standalone Components - par défaut, les NgModules sont optionnels
2. Signals - préférés à RxJS pour l'état des composants
3. Guards/Resolvers fonctionnels - au lieu des classes
4. Flux de contrôle - @if, @for, @switch au lieu des directives
5. inject() - au lieu de l'injection par constructeur
6. TypeScript Strict - contrôle complet des types
7. ESLint - au lieu de TSLint
8. Zoneless - pour une performance maximale

Résumé du voyage

Félicitations, maître Angular !

Tu as appris :

• TypeScript et les Standalone Components
• Les Signals et la réactivité
• RxJS et la programmation réactive
• Les formulaires réactifs
• Le routage et les Guards
• Les services et l'injection de dépendances
• La gestion d’état
• HttpClient et les API
• Les tests
• La sécurité et la performance
• Le style et les animations
• Les techniques avancées

Ganbatte ! (Bonne chance !)

Le chemin du samouraï ne finit jamais - Angular continue d'évoluer, alors continue d'apprendre !