Angular 21 vs 14

 Si on compare Angular 21 avec Angular 14/15 (que beaucoup de projets utilisent encore), les changements sont importants. Angular est devenu beaucoup plus moderne, plus performant et plus simple.

Voici les principales différences qu'un recruteur peut attendre d'un développeur Senior.

---

1. Standalone Components (LA plus grosse évolution)

Angular 14/15

On utilisait les NgModule.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule]
})
export class AppModule {}

Chaque composant devait appartenir à un module.

---

Angular 21

Les Standalone Components sont devenus la norme.

@Component({
  standalone: true,
  selector: 'app-home',
  imports: [CommonModule],
  templateUrl: './home.html'
})
export class HomeComponent {}

On n'a quasiment plus besoin de :

• AppModule

• FeatureModule

• SharedModule

Cela simplifie énormément l'architecture.

---

2. Signals (énorme nouveauté)

Angular 14/15

On utilisait principalement :

Observable
BehaviorSubject
RxJS

Exemple :

count$ = new BehaviorSubject(0);

---

Angular 21

On peut utiliser :

count = signal(0);

count.set(5);

count.update(v => v + 1);

Lecture :

count()

Au lieu de

count$.value

Les Signals permettent :

• moins de code

• meilleure performance

• moins de détection de changements inutile

---

3. Computed Signals

Avant

total$ =
combineLatest(...)

Maintenant

price = signal(10);

quantity = signal(5);

total = computed(() =>
    price() * quantity()
);

Angular recalcule automatiquement.

---

4. Effects

Avant

subscribe(...)

Partout.

Aujourd'hui

effect(() => {

console.log(count());

});

L'effet se déclenche automatiquement.

---

5. Nouveau Control Flow (@if, @for)

Avant

<div *ngIf="user">

</div>

Aujourd'hui

@if(user){

<div>

</div>

}

Boucle

Avant

<li *ngFor="let item of items">

</li>

Maintenant

@for(item of items; track item.id){

<li>

</li>

}

Beaucoup plus lisible.

---

6. Deferred Loading

Très utile.

@defer {

<big-component/>

}

Le composant n'est chargé que lorsque nécessaire.

Très utile pour améliorer les performances.

---

7. Hydration

Pour le SSR.

Angular hydrate directement le HTML envoyé par le serveur.

Les performances sont meilleures.

---

8. Zoneless

Avant

Angular dépendait énormément de

zone.js

Aujourd'hui

Angular peut fonctionner sans Zone.js grâce aux Signals.

Moins de détection de changement.

Meilleure performance.

---

9. Injection moderne

Avant

constructor(private service: UserService){}

Aujourd'hui

service = inject(UserService);

Plus besoin de constructeur.

---

10. Nouvel Input

Avant

@Input()

name!:string;

Aujourd'hui

name = input<string>();

Encore basé sur Signals.

---

11. Nouvel Output

Avant

@Output()

save = new EventEmitter();

Aujourd'hui

save = output();

Plus simple.

---

12. Resource API

Pour charger des données.

Avant

http.get(...)
.subscribe(...)

Aujourd'hui

resource({
loader: () => ...
})

Plus intégré à Angular.

---

13. Meilleur Lazy Loading

Standalone Components rendent le lazy loading beaucoup plus simple.

Avant

FeatureModule

Aujourd'hui

loadComponent: () =>
import(...)

---

14. Build beaucoup plus rapide

Angular utilise désormais :

• Vite

• esbuild

au lieu de Webpack.

Les builds sont beaucoup plus rapides.

---

15. Signals + OnPush

Avant

Pour optimiser :

ChangeDetectionStrategy.OnPush

Aujourd'hui

Signals suffisent souvent à limiter les mises à jour inutiles.

---

Résumé pour un entretien

Si un recruteur vous demande : "Quelles sont les principales nouveautés d'Angular 21 par rapport à Angular 14/15 ?", vous pouvez répondre :

"Les évolutions majeures sont les Standalone Components, qui remplacent progressivement les NgModules, l'introduction des Signals pour une gestion plus réactive de l'état avec signal, computed et effect, ainsi que le nouveau contrôle de flux (@if, @for), le lazy loading simplifié, l'injection avec inject(), les nouvelles API input() et output(), et un outillage modernisé avec Vite et esbuild pour des builds plus rapides. Angular est aujourd'hui plus performant, plus simple à maintenir et moins dépendant de RxJS pour les cas d'usage courants."