Questions d'entretien Angular
1. Qu'est-ce que la détection de changement dans Angular ?
La détection de changement est le mécanisme par lequel Angular synchronise le modèle de données avec la vue. Angular utilise Zone.js pour intercepter les événements asynchrones (clics, requêtes HTTP, timers) et declencher un cycle de vérification. Par défaut, Angular vérifie tous les composants de l'arbre (stratégie Default). Avec OnPush, Angular ne vérifie un composant que si ses inputs changent par référence ou si un observable emet une nouvelle valeur, ce qui améliore significativement les performances.
2. Expliquez l'injection de dépendances dans Angular.
L'injection de dépendances (DI) est un design pattern au cœur d'Angular. Les services sont enregistres auprès d'un injector (via providedIn: 'root' ou dans un module/composant). Quand un composant declare un service dans son constructeur, Angular résout la dépendance automatiquement. La hiérarchie d'injectors permet de contrôler le scope : 'root' pour un singleton global, un module pour un scope par module, ou un composant pour une instance par composant.
3. Quelle est la différence entre un module et un standalone component ?
Les NgModules regroupent des composants, directives et pipes lies, avec imports et exports explicites. Les standalone components (Angular 14+) sont auto-suffisants : ils declarent leurs propres imports directement. Les standalone components simplifient l'architecture, réduisent le boilerplate et améliorent le tree-shaking. Angular recommande désormais les standalone components par défaut.
4. Comment fonctionne RxJS dans Angular ?
RxJS est la bibliothèque réactive utilisee par Angular pour gérer les flux de données asynchrones. Angular l'utilise massivement : HttpClient retourne des Observables, les formulaires réactifs utilisent valueChanges, le Router utilise des Observables pour les paramètres. Les opérateurs essentiels : map, filter, switchMap (pour les requêtes dependantes), mergeMap, debounceTime (pour les recherches), distinctUntilChanged, takeUntil (pour le nettoyage).
5. Expliquez les formulaires réactifs vs template-driven.
Les formulaires réactifs (ReactiveFormsModule) sont définis dans le code TypeScript avec FormGroup, FormControl et FormArray. Ils offrent un contrôle total, sont testables, et gèrent facilement les validations complexes. Les formulaires template-driven (FormsModule) utilisent des directives comme ngModel dans le template. Ils sont plus simples pour les formulaires basiques mais moins flexibles. En général, les formulaires réactifs sont préférés pour les applications d'entreprise.
6. Qu'est-ce que le lazy loading dans Angular ?
Le lazy loading permet de charger les modules/composants à la demande, plutôt qu'au chargement initial. Configurez-le dans le routing avec loadComponent (standalone) ou loadChildren (modules). Angular cree un bundle separe pour chaque route lazy-loaded, ce qui réduit le bundle initial et accélère le premier chargement. Combinez avec le preloading (PreloadAllModules ou stratégie personnalisee) pour charger les modules en arriere-plan.
7. Comment gérer l'état dans une application Angular complexe ?
Plusieurs approches : Services avec BehaviorSubject pour un état simple et local. NgRx (inspire de Redux) pour un état global complexe avec actions, reducers, effects et selectors. NgRx Component Store pour un état local au composant. NGXS comme alternative à NgRx avec moins de boilerplate. Le choix dépend de la complexité : pour une application simple, les services suffisent ; pour une application complexe avec beaucoup d'état partage, NgRx est recommandé.
8. Qu'est-ce que les signals dans Angular ?
Les Signals (Angular 16+) sont un nouveau système de réactivité fine. Un signal est un wrapper autour d'une valeur qui notifie les consommateurs quand elle change. Les avantages : meilleure performance (pas besoin de Zone.js), réactivité granulaire, API simple (signal(), computed(), effect()). Les signals coexistent avec RxJS et sont destines à remplacer progressivement Zone.js pour la détection de changement.
9. Comment sécuriser une application Angular ?
Sécurité cote client : Angular echappe automatiquement les valeurs dans les templates (protection XSS). Utilisez HttpInterceptors pour ajouter les tokens d'authentification aux requêtes. Implémentez des route guards (CanActivate, CanLoad) pour protéger les routes. Cote configuration : activez les Content Security Policy headers, utilisez HTTPS, et ne stockez jamais de secrets dans le code frontend.
10. Comment tester une application Angular ?
Angular utilise Jasmine et Karma par défaut (ou Jest en alternative). TestBed configure un module de test avec les dépendances nécessaires. Testez les composants avec ComponentFixture (detectChanges, queries DOM). Testez les services en isolation avec des mocks (HttpTestingModule pour les requêtes HTTP). Utilisez Protractor (legacy) ou Cypress/Playwright pour les tests end-to-end.