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

Проблема: Отсутствие декоратора Injectable или неправильная компиляция TypeScript

Ваша ошибка возникает из-за того, что Angular не может определить зависимости для конструктора компонента MyComponent. Система внедрения зависимостей (DI) Angular использует информацию о типах параметров конструктора, чтобы понять, какие сервисы нужно предоставить. В TypeScript есть два основных сценария, приводящих к этой ошибке:

1. Сервис не помечен декоратором @Injectable()

Хотя в вашем примере UserService не имеет собственных зависимостей и может работать без декоратора, это считается плохой практикой. Angular полагается на метаданные, генерируемые декораторами. Без @Injectable() TypeScript может не сгенерировать правильную информацию о типах для DI, особенно при использовании старых версий TypeScript или определенных настроек компилятора.

Решение: Добавьте декоратор @Injectable() в ваш сервис:

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // или 'any' для ленивой загрузки
})
export class UserService {
  private users = ['Alice', 'Bob', 'Charlie'];

  getUsers(): string[] {
    return this.users;
  }
}

Обратите внимание на свойство providedIn: 'root'. Это указывает Angular регистрировать сервис на уровне корневого инжектора, что избавляет от необходимости добавлять его в providers модуля. Если вы используете этот подход, то можете удалить UserService из providers в AppModule.

2. Неправильная настройка компилятора TypeScript

Если вы используете Angular до версии 6 или компилируете с флагом emitDecoratorMetadata: false, то декоратор @Component не сможет получить информацию о типе параметра userService. Убедитесь, что в файле tsconfig.json есть следующие настройки:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    ...
  }
}

Флаг emitDecoratorMetadata включает генерацию метаданных для декораторов, что критически важно для работы DI в Angular.

3. Циклические зависимости или отсутствие импорта

Хотя в вашем случае это маловероятно, проверьте:

• Нет ли циклических ссылок между файлами (например, сервис импортирует компонент, который импортирует сервис).
• Импортирован ли UserService в файл компонента (у вас это есть).
• Не используется ли сервис, который сам требует внедрения зависимостей, но не помечен @Injectable().

4. Использование Angular 2/4 с старым синтаксисом

В старых версиях Angular (2.x) нужно было обязательно использовать @Injectable() для всех сервисов, даже без зависимостей. Если вы работаете с Angular 2, добавьте декоратор обязательно.

Итоговое решение для вашего случая:

1. Добавьте @Injectable({ providedIn: 'root' }) над классом UserService.
2. Убедитесь, что в tsconfig.json включены флаги experimentalDecorators и emitDecoratorMetadata.
3. Если все еще не работает — удалите UserService из providers в модуле (при использовании providedIn: 'root' это избыточно).

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

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

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

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

providers: [
  { provide: UserService, useFactory: () => new UserService() }
]