Questions d'entretien Angular
1. Qu'est-ce que la detection de changement dans Angular ?
La detection de changement est le mecanisme par lequel Angular synchronise le modele de donnees avec la vue. Angular utilise Zone.js pour intercepter les evenements asynchrones (clics, requetes HTTP, timers) et declencher un cycle de verification. Par defaut, Angular verifie tous les composants de l'arbre (strategie Default). Avec OnPush, Angular ne verifie un composant que si ses inputs changent par reference ou si un observable emet une nouvelle valeur, ce qui ameliore significativement les performances.
2. Expliquez l'injection de dependances dans Angular.
L'injection de dependances (DI) est un design pattern au coeur d'Angular. Les services sont enregistres aupres d'un injector (via providedIn: 'root' ou dans un module/composant). Quand un composant declare un service dans son constructeur, Angular resout la dependance automatiquement. La hierarchie d'injectors permet de controler 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 difference 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, reduisent le boilerplate et ameliorent le tree-shaking. Angular recommande desormais les standalone components par defaut.
4. Comment fonctionne RxJS dans Angular ?
RxJS est la bibliotheque reactive utilisee par Angular pour gerer les flux de donnees asynchrones. Angular l'utilise massivement : HttpClient retourne des Observables, les formulaires reactifs utilisent valueChanges, le Router utilise des Observables pour les parametres. Les operateurs essentiels : map, filter, switchMap (pour les requetes dependantes), mergeMap, debounceTime (pour les recherches), distinctUntilChanged, takeUntil (pour le nettoyage).
5. Expliquez les formulaires reactifs vs template-driven.
Les formulaires reactifs (ReactiveFormsModule) sont definis dans le code TypeScript avec FormGroup, FormControl et FormArray. Ils offrent un controle total, sont testables, et gerent 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 general, les formulaires reactifs sont preferes pour les applications d'entreprise.
6. Qu'est-ce que le lazy loading dans Angular ?
Le lazy loading permet de charger les modules/composants a la demande, plutot 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 reduit le bundle initial et accelere le premier chargement. Combinez avec le preloading (PreloadAllModules ou strategie personnalisee) pour charger les modules en arriere-plan.
7. Comment gerer l'etat dans une application Angular complexe ?
Plusieurs approches : Services avec BehaviorSubject pour un etat simple et local. NgRx (inspire de Redux) pour un etat global complexe avec actions, reducers, effects et selectors. NgRx Component Store pour un etat local au composant. NGXS comme alternative a NgRx avec moins de boilerplate. Le choix depend de la complexite : pour une application simple, les services suffisent ; pour une application complexe avec beaucoup d'etat partage, NgRx est recommande.
8. Qu'est-ce que les signals dans Angular ?
Les Signals (Angular 16+) sont un nouveau systeme de reactivite 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), reactivite granulaire, API simple (signal(), computed(), effect()). Les signals coexistent avec RxJS et sont destines a remplacer progressivement Zone.js pour la detection de changement.
9. Comment securiser une application Angular ?
Securite cote client : Angular echappe automatiquement les valeurs dans les templates (protection XSS). Utilisez HttpInterceptors pour ajouter les tokens d'authentification aux requetes. Implementez des route guards (CanActivate, CanLoad) pour proteger 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 defaut (ou Jest en alternative). TestBed configure un module de test avec les dependances necessaires. Testez les composants avec ComponentFixture (detectChanges, queries DOM). Testez les services en isolation avec des mocks (HttpTestingModule pour les requetes HTTP). Utilisez Protractor (legacy) ou Cypress/Playwright pour les tests end-to-end.