Angular не может внедрить сервис: полный разбор ошибки

Введение: почему Angular кричит «Can't resolve all parameters»?

Вы пишете свой первый Angular-компонент, гордо добавляете в конструктор сервис для работы с API, запускаете приложение — и тут же получаете в консоли красную надпись:

EXCEPTION: Can't resolve all parameters for MyComponent: (?).

Знакомо? Эта ошибка — настоящий камень преткновения для новичков и даже опытных разработчиков, которые переходят с AngularJS. Она возникает, когда Angular не может понять, какой именно сервис нужно внедрить в компонент. В этой статье мы разберем все причины ошибки Can't resolve all parameters for component, покажем живые примеры на TypeScript и дадим пошаговые решения. Вы не только исправите баг, но и поймете, как работает Dependency Injection (DI) в Angular.

Что такое Dependency Injection и почему он важен?

Angular построен на системе внедрения зависимостей (DI). Когда вы пишете:

constructor(private myService: MyService) {}

Angular автоматически создает экземпляр MyService и передает его в компонент. Но для этого он должен знать три вещи:

• Какой тип (класс) нужно внедрить.
• Где зарегистрирован провайдер для этого типа.
• Что делать, если провайдера нет.

Если хотя бы один из этих пунктов не выполнен, вы получаете ошибку «Can't resolve all parameters».

Основные причины ошибки

Мы выделили 5 самых частых сценариев, которые приводят к этой ошибке. Каждый разберем с кодом.

1. Сервис не зарегистрирован в провайдерах

Самая очевидная причина. Вы создали сервис, но забыли добавить его в providers модуля или компонента.

Пример ошибочного кода:

// my.service.ts
@Injectable()
export class MyService {
  getData() { return 'data'; }
}

// my.component.ts
@Component({ selector: 'app-my', template: '...' })
export class MyComponent {
  constructor(private myService: MyService) {} // Ошибка!
}

Решение: Зарегистрируйте сервис в модуле:

@NgModule({
  providers: [MyService] // <-- обязательно
})
export class AppModule { }

Или в самом компоненте (если сервис нужен только ему):

@Component({
  providers: [MyService]
})
export class MyComponent { ... }

2. Отсутствует декоратор @Injectable()

Даже если вы зарегистрировали сервис в провайдерах, но забыли добавить декоратор @Injectable() — Angular не сможет прочитать метаданные.

Пример:

// Без декоратора
export class MyService { ... }

// В компоненте
constructor(private myService: MyService) {} // Ошибка!

Решение: Всегда добавляйте @Injectable():

@Injectable({ providedIn: 'root' }) // или просто @Injectable()
export class MyService { ... }

Кстати, providedIn: 'root' автоматически регистрирует сервис на уровне корневого инжектора — это современный и рекомендуемый подход.

3. Конфликт с AOT компиляцией и параметрами конструктора

Angular использует два режима компиляции: JIT (Just-in-Time) и AOT (Ahead-of-Time). Ошибка Can't resolve all parameters часто возникает при AOT, если TypeScript не сохранил информацию о типах параметров.

Причина: В старых версиях Angular (до 5) или при использовании определенных настроек tsconfig, TypeScript мог удалить метаданные типов. Например, если вы использовали emitDecoratorMetadata: false или забыли импортировать reflect-metadata.

Решение:

• Убедитесь, что в tsconfig.json есть "emitDecoratorMetadata": true и "experimentalDecorators": true.
• Проверьте, что в полифиллах (polyfills.ts) импортирован reflect-metadata (в новых проектах это уже есть).
• Используйте Angular CLI версии 6+ — он автоматически настраивает все правильно.

4. Циклические зависимости (Circular Dependency)

Если сервис A импортирует сервис B, а сервис B импортирует сервис A — возникает циклическая зависимость. Angular не может разрешить такой граф и выбрасывает ошибку.

Пример:

// service-a.ts
@Injectable()
export class ServiceA {
  constructor(private b: ServiceB) {}
}

// service-b.ts
@Injectable()
export class ServiceB {
  constructor(private a: ServiceA) {} // Цикл!
}

Решение:

• Реструктурируйте логику: вынесите общие методы в третий сервис.
• Используйте forwardRef (но это костыль, лучше избегать).
• Примените паттерн «Event Bus» или RxJS Subject для обмена данными.

5. Ошибки при использовании фабрик и токенов

Если вы используете кастомный провайдер с useFactory или useValue, легко ошибиться с параметрами.

Пример ошибочного кода:

providers: [
  { provide: MyService, useFactory: (dep1: Dep1) => new MyService(dep1) }
]
// Забыли указать deps: [Dep1]

Решение: Всегда добавляйте массив deps:

providers: [
  {
    provide: MyService,
    useFactory: (dep1: Dep1) => new MyService(dep1),
    deps: [Dep1]
  }
]

Как быстро диагностировать проблему?

Вот чек-лист для отладки:

1. Проверьте консоль браузера: Angular часто пишет точное имя компонента и параметра, который не может разрешить.
2. Убедитесь, что сервис импортирован: import { MyService } from './my.service'; и путь корректен.
3. Проверьте провайдеры: В модуле или компоненте есть providers: [MyService]?
4. Посмотрите на @Injectable(): Он есть? Используется providedIn: 'root'?
5. Проверьте tsconfig: Включены ли emitDecoratorMetadata и experimentalDecorators?
6. Исключите циклические импорты: Используйте анализатор кода (например, WebStorm или VS Code с плагином).

Продвинутый случай: