Angular ne peut pas injecter le service : analyse complète de l'erreur

Introduction : pourquoi Angular crie-t-il « Can't resolve all parameters » ?

Vous écrivez votre premier composant Angular, vous ajoutez fièrement un service dans le constructeur pour travailler avec l'API, vous lancez l'application — et vous obtenez immédiatement un message rouge dans la console :

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

Vous reconnaissez ? Cette erreur est un véritable obstacle pour les débutants et même pour les développeurs expérimentés qui passent d'AngularJS. Elle se produit lorsque Angular ne peut pas comprendre quel service doit être injecté dans le composant. Dans cet article, nous analyserons toutes les causes de l'erreur Can't resolve all parameters for component, montrerons des exemples concrets en TypeScript et donnerons des solutions étape par étape. Vous ne corrigerez pas seulement le bug, mais vous comprendrez également comment fonctionne l'injection de dépendances (DI) dans Angular.

Qu'est-ce que l'injection de dépendances et pourquoi est-elle importante ?

Angular est construit sur un système d'injection de dépendances (DI). Lorsque vous écrivez :

constructor(private myService: MyService) {}

Angular crée automatiquement une instance de MyService et la transmet au composant. Mais pour cela, il doit connaître trois choses :

• Quel type (classe) doit être injecté.
• Où le fournisseur pour ce type est enregistré.
• Que faire s'il n'y a pas de fournisseur.

Si au moins un de ces points n'est pas rempli, vous obtenez l'erreur « Can't resolve all parameters ».

Principales causes de l'erreur

Nous avons identifié 5 scénarios les plus fréquents qui mènent à cette erreur. Chacun sera analysé avec du code.

1. Le service n'est pas enregistré dans les fournisseurs

La cause la plus évidente. Vous avez créé un service, mais vous avez oublié de l'ajouter aux providers du module ou du composant.

Exemple de code erroné :

// 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) {} // Erreur !}

Solution : Enregistrez le service dans le module :

@NgModule({  providers: [MyService] // <-- obligatoire})export class AppModule { }

Ou dans le composant lui-même (si le service n'est nécessaire que pour lui) :

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

2. Absence du décorateur @Injectable()

Même si vous avez enregistré le service dans les fournisseurs, mais que vous avez oublié d'ajouter le décorateur @Injectable() — Angular ne pourra pas lire les métadonnées.

Exemple :

// Sans décorateurexport class MyService { ... }

// Dans le composantconstructor(private myService: MyService) {} // Erreur !

Solution : Ajoutez toujours @Injectable() :

@Injectable({ providedIn: 'root' }) // ou simplement @Injectable()export class MyService { ... }

D'ailleurs, providedIn: 'root' enregistre automatiquement le service au niveau de l'injecteur racine — c'est une approche moderne et recommandée.

3. Conflit avec la compilation AOT et les paramètres du constructeur

Angular utilise deux modes de compilation : JIT (Just-in-Time) et AOT (Ahead-of-Time). L'erreur Can't resolve all parameters survient souvent avec AOT, si TypeScript n'a pas conservé les informations sur les types des paramètres.

Cause : Dans les anciennes versions d'Angular (avant la 5) ou lors de l'utilisation de certains paramètres tsconfig, TypeScript pouvait supprimer les métadonnées de type. Par exemple, si vous utilisiez emitDecoratorMetadata: false ou oubliiez d'importer reflect-metadata.

Solution :

• Assurez-vous que dans tsconfig.json figurent "emitDecoratorMetadata": true et "experimental