Что делает providedIn: 'root' и как устроена иерархия инжекторов в Angular?

`providedIn: 'root'` регистрирует сервис в корневом инжекторе, и в приложении создаётся один его экземпляр (singleton).

Как это выглядит

@Injectable({ providedIn: 'root' })
export class AuthService {
  private http = inject(HttpClient);
}

Сервис доступен везде, и при отсутствии использования его удаляет tree shaking.

Иерархия

Инжекторы образуют дерево: корневой, инжекторы маршрутов и инжекторы компонентов. Angular ищет зависимость вверх по дереву, начиная с ближайшего.

@Component({
  selector: 'app-editor',
  providers: [EditorStateService],  // свой экземпляр на каждый компонент
})
export class EditorComponent {}

Так получают отдельное состояние для каждого экземпляра компонента.

Модификаторы

@Optional(), @Self(), @SkipSelf(), @Host() управляют поиском, а inject(Token, { optional: true }) делает то же функционально.

Коротко для собеседования

providedIn: 'root' делает сервис синглтоном. Ограничить область можно providers в компоненте или маршруте, поиск идёт вверх по дереву инжекторов.