Что делает providedIn: 'root' в Angular и чем отличается от указания зависимости в providers компонента?

Введение в Dependency Injection в Angular

Angular использует систему Dependency Injection (DI) для управления зависимостями. Сервисы — это классы, которые инкапсулируют логику и данные. Способ регистрации сервиса определяет, где он будет доступен и сколько экземпляров будет создано.

providedIn: 'root'

Когда вы указываете providedIn: 'root' в декораторе @Injectable, сервис регистрируется в корневом инжекторе приложения. Это означает, что во всем приложении будет существовать один единственный экземпляр этого сервиса (синглтон). Такой подход является рекомендуемым по умолчанию, так как он позволяет Angular выполнять tree-shaking: если сервис нигде не используется, он будет исключен из итогового бандла.

@Injectable({ providedIn: 'root' })
export class UserService {
  private user: string;
  setUser(name: string) { this.user = name; }
  getUser() { return this.user; }
}

providers в компоненте

Если вы добавляете сервис в массив providers конкретного компонента, Angular создает новый экземпляр сервиса для каждого экземпляра этого компонента. Этот экземпляр доступен только самому компоненту и его дочерним элементам (если они не имеют собственной регистрации). Это полезно, когда нужно изолировать состояние между разными частями приложения.

@Component({
  selector: 'app-profile',
  providers: [UserService]
})
export class ProfileComponent {
  constructor(private userService: UserService) {}
}

Ключевые различия

• Область видимости: providedIn: 'root' — глобально, providers — локально для компонента.
• Количество экземпляров: root — один на всё приложение, компонент — один на каждый экземпляр компонента.
• Tree-shaking: root позволяет удалить неиспользуемый сервис из бандла, компонент — нет.
• Жизненный цикл: root живет всё время работы приложения, компонент — уничтожается вместе с компонентом.

Вывод

Используйте providedIn: 'root' для сервисов, которые должны быть общими (например, API-клиенты, хранилища состояния). Применяйте providers в компоненте, когда нужна изоляция данных или специфичная логика для конкретного компонента и его поддерева.