Ошибка "Can't resolve all parameters for component" при внедрении сервиса в Angular

Причина ошибки и её решение

Ошибка "Can't resolve all parameters for component" в Angular возникает, когда система внедрения зависимостей (DI) не может определить, какой именно сервис нужно внедрить в конструктор компонента. В вашем случае проблема связана с тем, как TypeScript компилирует код и как Angular обрабатывает метаданные.

Основная причина: Angular использует рефлексию для получения типов параметров конструктора. Для этого он полагается на метаданные, которые генерирует TypeScript. Если эти метаданные недоступны или повреждены, Angular не может определить, что параметр userService имеет тип UserService.

Почему это происходит?

В вашем коде вы используете декоратор @Injectable() для сервиса — это правильно. Однако, есть несколько распространённых сценариев, когда метаданные теряются:

• Не включена опция компилятора emitDecoratorMetadata в tsconfig.json. Эта опция заставляет TypeScript генерировать метаданные типов для декорированных классов.
• Использование минификаторов/обфускаторов кода, которые переименовывают классы и параметры, ломая ссылки на типы.
• Импорт сервиса с неправильным путём или циклические зависимости.

Решение

Вот пошаговое решение вашей проблемы:

Шаг 1: Проверьте tsconfig.json

Убедитесь, что в вашем tsconfig.json включены следующие опции:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "module": "commonjs"
  }
}

Без emitDecoratorMetadata: true TypeScript не будет генерировать информацию о типах параметров конструктора, и Angular не сможет определить, что нужно внедрить.

Шаг 2: Используйте декоратор @Injectable() на сервисе

У вас уже есть @Injectable() на UserService — это правильно. Но убедитесь, что вы импортировали его из правильного модуля:

import { Injectable } from '@angular/core';

Шаг 3: Явно укажите тип в конструкторе компонента

Хотя TypeScript может выводить типы, лучше явно указать тип параметра:

constructor(private userService: UserService) { }

Шаг 4: Если проблема остаётся — используйте @Inject

В некоторых случаях (например, при использовании сторонних библиотек или минификации) нужно явно указать токен для внедрения с помощью декоратора @Inject:

import { Component, Inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: '...'
})
export class UserListComponent {
  users: string[];

  constructor(@Inject(UserService) private userService: UserService) {
    this.users = userService.getUsers();
  }
}

Шаг 5: Проверьте регистрацию в модуле

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

@NgModule({
  providers: [UserService] // или { provide: UserService, useClass: UserService }
})

Дополнительные советы

• Если вы используете Angular CLI, он автоматически настраивает tsconfig.json правильно — проверьте, не переопределили ли вы настройки.
• Перезапустите сервер разработки после изменений в tsconfig.json.
• Проверьте, что все файлы импортируются с правильными путями (регистр букв важен в некоторых ОС).

После выполнения этих шагов ошибка должна исчезнуть. Angular DI — мощный инструмент, но он требует правильной настройки метаданных TypeScript для работы.

// В app.module.ts
import { UserService } from './user.service';

export function userServiceFactory() {
  return new UserService();
}

@NgModule({
  providers: [
    { provide: UserService, useFactory: userServiceFactory }
  ]
})
export class AppModule { }

@Injectable({ providedIn: 'root' })
export class UserService { ... }