La hiérarchie des injecteurs

Angular possède une structure hiérarchique d'injecteurs - comme un système d'approvisionnement allant du Shogun aux Daimyo jusqu'aux châteaux individuels.

Les niveaux d'injecteurs

1Root Injector (Shogun)
2    ↓
3Module Injectors (Daimyo)
4    ↓
5Element Injectors (Castles)
6    ↓
7Component Injectors (Halls)

Les options de providedIn

1// 1. Root - Singleton pour toute l'application
2@Injectable({ providedIn: 'root' })
3export class GlobalService { }
4
5// 2. Any - Nouvelle instance pour chaque module en lazy loading (dépréciée depuis Angular 15, à éviter dans le nouveau code)
6@Injectable({ providedIn: 'any' })
7export class ScopedService { }
8
9// 3. Platform - Partagé entre plusieurs applications Angular
10@Injectable({ providedIn: 'platform' })
11export class SharedService { }

Providers dans un composant

1@Component({
2  selector: 'app-dojo',
3  standalone: true,
4  providers: [
5    TrainingService  // Nouvelle instance pour chaque instance du composant
6  ],
7  template: `...`
8})
9export class DojoComponent {
10  private training = inject(TrainingService);
11}

Providers vs providedIn: 'root'