- Angular 2026 : roadmap d'apprentissage complet

Pourquoi une roadmap d'apprentissage en 2026 ?

Angular a profondément évolué entre 2023 et 2026. La v17 introduisait le control flow (@if/@for), la v19 activait le SSR par défaut, la v20 stabilisait le mode zoneless et les Signals, et la v22 apportait les Signal Forms stables. Cette évolution rapide crée une confusion réelle : par où commencer, quoi apprendre en priorité, comment structurer sa progression ?

Le marché Angular en 2026

Selon le State of JS 2025 et les données LinkedIn, Angular occupe la 2e place des frameworks front-end les plus utilisés en entreprise (derrière React mais devant Vue). Les postes Angular sont concentrés dans des secteurs à forte valeur : finance, assurance, santé, logiciels B2B — avec des salaires médians 10 à 15% supérieurs aux postes React équivalents en raison de la spécialisation requise.

Cette roadmap est organisée en 5 niveaux progressifs. Chaque niveau s'appuie sur le précédent et inclut des exemples de code concrets et des projets pratiques pour valider vos acquis.

Niveau 1 — TypeScript et fondations Angular

Avant d'écrire une seule ligne d'Angular, investissez dans TypeScript. Angular est écrit en TypeScript, son API l'exploite à fond (types conditionnels, génériques, decorators). Un TypeScript faible produit un Angular fragile.

TypeScript indispensable pour Angular

// ✅ Types essentiels à maîtriser pour Angular
// 1. Interfaces (modèles de données)
interface Article {
  id: number;
  title: string;
  tags: string[];
  publishedAt: Date;
  author?: string; // champ optionnel
}

// 2. Génériques (pour les services HTTP)
interface ApiResponse<T> {
  data: T;
  total: number;
  page: number;
}

// 3. Union types (pour les états d'UI)
type LoadingState = 'idle' | 'loading' | 'success' | 'error';

// 4. Type guards (vérification de type à runtime)
function isArticle(obj: unknown): obj is Article {
  return typeof obj === 'object'
    && obj !== null
    && 'title' in obj
    && 'id' in obj;
}

// 5. Utility types (manipulation de types existants)
type ArticlePreview = Pick<Article, 'id' | 'title' | 'publishedAt'>;
type PartialArticle = Partial<Article>;

Votre premier composant Angular standalone

Depuis Angular 17, les composants standalone sont le modèle par défaut. Pas de NgModule, pas de declarations arrays — chaque composant déclare ses propres imports.

// src/app/features/welcome/welcome.component.ts
import { Component, input, output, computed } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-welcome',
  standalone: true, // ✅ Composant autonome, pas de NgModule
  imports: [CommonModule], // ✅ Imports locaux au composant
  template: `
    <div class="welcome-card">
      <!-- @if : control flow Angular 17+ (remplace *ngIf) -->
      @if (isLoggedIn()) {
        <h1>Bonjour, {{ greetingName() }} !</h1>
        <button (click)="logout.emit()">Déconnexion</button>
      } @else {
        <h1>Bienvenue sur AngularForAll</h1>
        <button (click)="login.emit()">Se connecter</button>
      }

      <!-- @for : control flow Angular 17+ (remplace *ngFor) -->
      @for (tag of tags(); track tag) {
        <span class="badge">{{ tag }}</span>
      } @empty {
        <p>Aucun tag disponible.</p>
      }
    </div>
  `,
})
export class WelcomeComponent {
  // ✅ Signal inputs (Angular 17.1+) — remplace @Input()
  userName = input<string>('Visiteur');
  isLoggedIn = input(false);
  tags = input<string[]>([]);

  // ✅ Signal outputs (Angular 17.3+) — remplace @Output()
  login  = output();
  logout = output();

  // ✅ Computed signal — dérivé automatiquement de userName
  greetingName = computed(() =>
    this.userName().charAt(0).toUpperCase() + this.userName().slice(1)
  );
}

Configuration Angular CLI minimale

# Installation de l'Angular CLI (version 22+ en 2026)
npm install -g @angular/cli@latest

# Créer un nouveau projet standalone (mode par défaut)
ng new mon-projet --style=css --ssr=false

# Structure générée
mon-projet/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Composant racine
│   │   ├── app.config.ts          # Configuration de l'application
│   │   └── app.routes.ts          # Routes de l'application
│   ├── index.html
│   └── styles.css
├── angular.json                   # Configuration CLI
├── tsconfig.json                  # Configuration TypeScript
└── package.json

Niveau 2 — Signals et réactivité moderne

Les Signals sont la nouveauté la plus importante d'Angular depuis Angular 16. Stables depuis Angular 20, ils représentent en 2026 l'approche recommandée pour tout état local dans les composants. Comprendre et maîtriser les Signals est devenu non négociable pour tout développeur Angular.

Les 5 primitives Signals à maîtriser

// src/app/features/counter/counter.component.ts
import { Component, signal, computed, effect, linkedSignal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div class="counter">
      <p>Compteur : {{ count() }}</p>
      <p>Double : {{ doubled() }}</p>
      <p>Statut : {{ status() }}</p>

      <button (click)="increment()">+1</button>
      <button (click)="decrement()">-1</button>
      <button (click)="reset()">Reset</button>
    </div>
  `,
})
export class CounterComponent {
  // 1. signal() — état mutable de base
  count = signal(0);

  // 2. computed() — dérivé en lecture seule, mis à jour automatiquement
  doubled = computed(() => this.count() * 2);

  // 3. computed avec logique conditionnelle
  status = computed(() => {
    const n = this.count();
    if (n < 0) return 'négatif';
    if (n === 0) return 'zéro';
    return 'positif';
  });

  constructor() {
    // 4. effect() — effets de bord réactifs (logging, localStorage, DOM)
    effect(() => {
      // Ce bloc s'exécute chaque fois que count() change
      console.log(`Compteur mis à jour : ${this.count()}`);
      localStorage.setItem('counter', String(this.count()));
    });
  }

  increment(): void { this.count.update(n => n + 1); }
  decrement(): void { this.count.update(n => n - 1); }
  reset(): void     { this.count.set(0); }
}

linkedSignal() — synchronisation d'état avancée

// src/app/features/pagination/pagination.component.ts
import { Component, signal, linkedSignal, computed, input } from '@angular/core';

@Component({
  selector: 'app-pagination',
  standalone: true,
  template: `
    <div class="pagination">
      <p>Page {{ currentPage() }} / {{ totalPages() }}</p>
      <button [disabled]="currentPage() === 1" (click)="prev()">← Préc</button>
      <button [disabled]="currentPage() === totalPages()" (click)="next()">Suiv →</button>
    </div>
  `,
})
export class PaginationComponent {
  itemsPerPage = input(10);
  totalItems   = input(0);

  totalPages = computed(() => Math.ceil(this.totalItems() / this.itemsPerPage()));

  // ✅ linkedSignal() : currentPage se réinitialise à 1 quand itemsPerPage change
  currentPage = linkedSignal(() => {
    this.itemsPerPage(); // dépendance déclarée
    return 1; // valeur de reset
  });

  prev(): void { this.currentPage.update(p => Math.max(1, p - 1)); }
  next(): void { this.currentPage.update(p => Math.min(this.totalPages(), p + 1)); }
}

Signal queries — viewChild et contentChild modernes

// src/app/features/modal/modal.component.ts
import { Component, viewChild, ElementRef, signal, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-modal',
  standalone: true,
  template: `
    <div class="modal-overlay" [class.active]="isOpen()" (click)="closeOnOverlay($event)">
      <!-- ✅ #modalContent : référence template -->
      <div #modalContent class="modal-content">
        <button (click)="close()">✕</button>
        <ng-content />
      </div>
    </div>
  `,
})
export class ModalComponent {
  isOpen = signal(false);

  // ✅ viewChild() — Signal query (Angular 17.2+) remplace @ViewChild
  modalContent = viewChild<ElementRef>('modalContent');

  open(): void {
    this.isOpen.set(true);
    // modalContent() disponible après l'ouverture
    setTimeout(() => this.modalContent()?.nativeElement.focus(), 0);
  }

  close(): void { this.isOpen.set(false); }

  closeOnOverlay(event: MouseEvent): void {
    // Ferme seulement si click sur l'overlay (pas sur le contenu)
    if (event.target === event.currentTarget) this.close();
  }
}

Niveau 3 — Routing avancé et lazy loading

Le routeur Angular est l'un des plus puissants du monde front-end. En 2026, la configuration se fait via des fonctions (pas de NgModule), le lazy loading est trivial, et les guards sont des fonctions pures injectables.

Configuration du routeur standalone

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  // Route par défaut
  { path: '', redirectTo: '/accueil', pathMatch: 'full' },

  // Route simple avec composant inline
  {
    path: 'accueil',
    loadComponent: () =>
      import('./features/home/home.component').then(m => m.HomeComponent),
    title: 'Accueil — AngularForAll',
  },

  // Route protégée par guard fonctionnel
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./features/dashboard/dashboard.component').then(m => m.DashboardComponent),
    canActivate: [authGuard], // ✅ Guard fonctionnel (pas de classe)
    title: 'Tableau de bord',
  },

  // Route avec lazy loading d'un module de routes (feature routing)
  {
    path: 'articles',
    loadChildren: () =>
      import('./features/articles/articles.routes').then(m => m.ARTICLES_ROUTES),
  },

  // Route avec paramètre dynamique
  {
    path: 'articles/:slug',
    loadComponent: () =>
      import('./features/articles/detail/article-detail.component').then(m => m.ArticleDetailComponent),
  },

  // Page 404
  { path: '**', loadComponent: () => import('./shared/components/not-found/not-found.component').then(m => m.NotFoundComponent) },
];

Guard fonctionnel avec inject()

// src/app/core/guards/auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

// ✅ Guard fonctionnel en 2026 — plus de classe CanActivate
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router      = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }

  // Rediriger vers la connexion en conservant l'URL cible
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url },
  });
};

// Variante avec Signal pour réactivité
export const roleGuard = (requiredRole: string): CanActivateFn => {
  return () => {
    const authService = inject(AuthService);
    const router      = inject(Router);

    const user = authService.currentUser(); // Signal
    if (user && user.roles.includes(requiredRole)) {
      return true;
    }

    return router.createUrlTree(['/acces-refuse']);
  };
};

Lire les paramètres de route avec Signals

// src/app/features/articles/detail/article-detail.component.ts
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs/operators';
import { ArticleService } from '../services/article.service';

@Component({
  selector: 'app-article-detail',
  standalone: true,
  template: `
    @if (article(); as art) {
      <article>
        <h1>{{ art.title }}</h1>
        <p>{{ art.content }}</p>
      </article>
    } @else {
      <p>Chargement...</p>
    }
  `,
})
export class ArticleDetailComponent {
  private route          = inject(ActivatedRoute);
  private articleService = inject(ArticleService);

  // ✅ Convertir l'Observable route params en Signal
  private slug = toSignal(
    this.route.paramMap.pipe(map(params => params.get('slug') ?? ''))
  );

  // ✅ resource() — chargement réactif basé sur le Signal slug
  articleResource = this.articleService.getArticleBySlug(this.slug);
  article = this.articleResource.value;
}

Niveau 4 — State management et HTTP

En 2026, le state management Angular s'est simplifié. Pour la majorité des applications, Signal Store (part of NgRx) ou un simple service avec Signals suffisent. L'API httpResource() révolutionne les appels HTTP réactifs.

Service avec Signals — pattern pour petites apps

// src/app/core/services/articles.service.ts
import { Injectable, signal, computed, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { rxResource } from '@angular/core/rxjs-interop';

export interface Article {
  id: number;
  title: string;
  category: string;
  tags: string[];
}

@Injectable({ providedIn: 'root' })
export class ArticlesService {
  private http = inject(HttpClient);

  // ✅ État global partagé via Signals
  private _selectedCategory = signal<string | null>(null);
  private _searchQuery      = signal('');

  // API publique en lecture seule
  selectedCategory = this._selectedCategory.asReadonly();
  searchQuery      = this._searchQuery.asReadonly();

  // Chargement réactif via rxResource (Angular 19+)
  articlesResource = rxResource({
    request: () => ({
      category: this._selectedCategory(),
      q: this._searchQuery(),
    }),
    loader: ({ request }) => {
      const params: Record<string, string> = {};
      if (request.category) params['category'] = request.category;
      if (request.q)        params['q']        = request.q;
      return this.http.get<Article[]>('/api/articles', { params });
    },
  });

  // Données et états exposés en computed
  articles = this.articlesResource.value;
  isLoading = this.articlesResource.isLoading;
  error     = this.articlesResource.error;

  // Actions
  setCategory(category: string | null): void {
    this._selectedCategory.set(category);
  }

  setSearch(query: string): void {
    this._searchQuery.set(query);
  }
}

httpResource() — API HTTP réactive Signal-native

// src/app/features/profile/profile.component.ts
import { Component, signal, inject } from '@angular/core';
import { httpResource } from '@angular/common/http';
import { AuthService } from '@core/services/auth.service';

interface UserProfile {
  id: string;
  name: string;
  email: string;
  avatar: string;
  plan: 'free' | 'pro' | 'enterprise';
}

@Component({
  selector: 'app-profile',
  standalone: true,
  template: `
    @if (profileResource.isLoading()) {
      <div class="spinner">Chargement du profil...</div>
    } @else if (profileResource.error()) {
      <div class="alert alert-danger">
        Erreur : {{ profileResource.error()?.message }}
      </div>
    } @else if (profileResource.value(); as profile) {
      <div class="profile-card">
        <img [src]="profile.avatar" [alt]="profile.name">
        <h2>{{ profile.name }}</h2>
        <p>{{ profile.email }}</p>
        <span class="badge">Plan {{ profile.plan }}</span>
      </div>
    }
  `,
})
export class ProfileComponent {
  private auth = inject(AuthService);

  // ✅ httpResource() — chargement HTTP Signal-natif (Angular 19.2+)
  profileResource = httpResource<UserProfile>(() =>
    this.auth.isAuthenticated()
      ? `/api/users/${this.auth.currentUser()?.id}/profile`
      : null // null désactive la requête
  );
}

Niveau 5 — SSR, tests et performance

Le niveau avancé distingue un développeur Angular senior d'un développeur intermédiaire. Les trois piliers sont : le Server-Side Rendering pour les performances et le SEO, les tests automatisés pour la fiabilité, et l'optimisation des performances pour l'expérience utilisateur.

SSR Angular — configuration minimale

# Ajouter le SSR à un projet existant
ng add @angular/ssr

# Créer un projet avec SSR dès le début
ng new mon-app-ssr --ssr=true

# Tester le SSR localement
ng serve      # dev : rendu client
ng run mon-app:serve-ssr  # dev : rendu serveur + hydration

// src/app/app.config.ts — configuration SSR
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    // ✅ Zones conservées pour SSR (zoneless nécessite attention côté serveur)
    provideZoneChangeDetection({ eventCoalescing: true }),

    // ✅ withFetch() obligatoire pour SSR (Node.js utilise fetch, pas XMLHttpRequest)
    provideHttpClient(withFetch()),

    // ✅ Hydration incrémentale avec event replay (Angular 19+)
    provideClientHydration(withEventReplay()),

    provideRouter(routes, withViewTransitions()),
  ],
};

Tests avec Vitest et Testing Library

// src/app/features/counter/counter.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CounterComponent], // ✅ Composant standalone : import direct
    }).compileComponents();

    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('devrait démarrer à 0', () => {
    expect(component.count()).toBe(0);
  });

  it('devrait incrémenter', () => {
    component.increment();
    expect(component.count()).toBe(1);
    expect(component.doubled()).toBe(2); // Signal computed vérifié
  });

  it('devrait afficher le statut correct', () => {
    component.count.set(-5);
    expect(component.status()).toBe('négatif');

    component.count.set(0);
    expect(component.status()).toBe('zéro');

    component.count.set(10);
    expect(component.status()).toBe('positif');
  });

  it('devrait afficher le compteur dans le DOM', () => {
    component.count.set(42);
    fixture.detectChanges(); // Déclencher la détection de changements

    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('p')?.textContent).toContain('42');
  });
});

Optimisation performance : checklist Angular 2026

// ✅ 1. OnPush par défaut (zoneless = OnPush partout, sinon l'ajouter manuellement)
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})

// ✅ 2. Lazy loading des images (Angular Image Directive)
// Dans le template :
// <img ngSrc="hero.webp" width="800" height="400" priority>
// <img ngSrc="article.webp" width="400" height="200" loading="lazy">

// ✅ 3. Defer loading des composants non critiques
// Dans le template :
// @defer (on viewport) {
//   <app-comments />
// } @placeholder {
//   <div class="placeholder-block">Commentaires...</div>
// }

// ✅ 4. Analyse du bundle
// ng build --stats-json
// npx webpack-bundle-analyzer dist/mon-app/browser/stats.json

// ✅ 5. Préchargement intelligent des routes
import { PreloadAllModules } from '@angular/router';
provideRouter(routes, withPreloading(PreloadAllModules))

Plan d'étude sur 6 mois

Voici un plan réaliste pour passer de débutant à développeur Angular employable en 6 mois, avec une pratique d'1 à 2 heures par jour. Ce plan suppose une connaissance préalable de JavaScript et du développement web de base (HTML, CSS).

Jalons intermédiaires à célébrer

• Semaine 2 : Premier composant affiché dans le navigateur via ng serve
• Semaine 6 : Premier Signal réactif qui met à jour le DOM automatiquement
• Mois 2 : Application connectée à une API publique (OpenWeather, JSONPlaceholder)
• Mois 3 : Premier guard fonctionnel qui protège une route
• Mois 4 : Premier service partagé entre plusieurs composants
• Mois 5 : Premier test qui passe au vert après un bug détecté automatiquement
• Mois 6 : URL publique de votre portfolio accessible depuis n'importe quel navigateur

Ressources et communauté

L'écosystème Angular dispose en 2026 de ressources de qualité variable. Voici une sélection rigoureuse des sources fiables, organisées par niveau.

Documentation officielle — référence absolue

La documentation Angular (angular.dev) a été entièrement réécrite en 2024 et est désormais la meilleure ressource d'apprentissage. Elle inclut des tutoriels interactifs en ligne (sans installation), une référence API complète et des guides de migration détaillés.

Projets open-source Angular à étudier

# Exemples de code officiels à explorer
# 1. Angular CLI — comprendre la structure d'un projet CLI
git clone https://github.com/angular/angular-cli.git

# 2. Angular Material — composants production-ready à étudier
git clone https://github.com/angular/components.git

# 3. Exemples de apps Angular complètes sur GitHub
# angular/angular → dossier packages/examples/
# ngneat/elf      → exemple de Signal Store léger
# analogjs/analog → framework SSR Angular (inspiration)

Utiliser l'IA dans votre apprentissage Angular

En 2026, l'IA est devenue un compagnon d'apprentissage indispensable. Mais attention à l'utiliser intelligemment : elle génère parfois du code Angular obsolète (pré-Signals, avec NgModule, sans standalone).

// Prompt efficace pour l'IA en apprentissage Angular 2026
// ✅ Soyez précis sur la version et les patterns attendus :
"Génère un composant Angular 22 standalone avec Signal inputs,
control flow @if/@for, et un Signal pour l'état local.
N'utilise pas NgModule, @Input decorator ni *ngIf."

// ✅ Demandez des explications :
"Explique pourquoi linkedSignal() est préférable à un effect()
qui appelle signal.set() dans cet exemple."

// ✅ Utilisez Claude Code avec Angular MCP Server pour :
// - Générer des migrations v17→v22
// - Détecter les patterns obsolètes dans votre code
// - Générer des tests unitaires pour vos composants

Signaux de progression — vous êtes prêt quand…

• Niveau débutant : Vous créez un composant standalone, utilisez @if et @for, et comprenez la liaison de données sans consulter la doc
• Niveau intermédiaire : Vous résolvez un bug de Signal sans aide, vous configurez le routing avec lazy loading et guards en moins de 30 minutes
• Niveau avancé : Vous analysez un rapport Lighthouse et savez quoi optimiser, vous écrivez des tests qui détectent des régressions réelles
• Niveau expert : Vous relisez le CHANGELOG Angular et comprenez les motivations des nouvelles APIs ; vous guidez des juniors sur les patterns modernes

Conclusion

Angular en 2026 est un framework mature, cohérent et ambitieux. La migration vers les Signals, les composants standalone et le mode zoneless n'était pas une refonte cosmétique : c'est une réécriture profonde de la philosophie de développement, plus proche des primitives web modernes et plus accessible aux nouveaux développeurs.

Cette roadmap en 5 niveaux vous donne un chemin structuré : de TypeScript et des fondations standalone (Niveau 1), jusqu'au SSR et aux tests de production (Niveau 5). En 6 mois de pratique régulière, vous serez en mesure de prendre en charge un projet Angular professionnel, lire et contribuer à un codebase existant, et passer des entretiens techniques Angular avec confiance.

La prochaine étape : choisissez votre premier projet pratique. Une To-do list avec Signals, un dashboard météo connecté à une API publique, ou un clone d'un site que vous aimez — peu importe, l'essentiel est de coder dès aujourd'hui. Angular récompense la pratique bien plus que la lecture.