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,computedeteffect, ainsi que le nouveau contrôle de flux (@if,@for), le lazy loading simplifié, l'injection avecinject(), les nouvelles APIinput()etoutput(), 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."
