NG0201 - No Provider Found

Réponse courte

Vous essayez d'utiliser un service sans l'avoir correctement déclaré dans votre application. Autrement dit, vous avez oublié de fournir le service au provider. Il vous manque un provide[quelque chose] dans votre appConfig, ou alors votre service ne contient pas providedIn: 'root' dans le décorateur @Injectable.

L'erreur "No Provider Found" est l'une des erreurs les plus courantes dans Angular. Elle survient lorsque vous essayez d'utiliser un service sans l'avoir correctement déclaré dans votre application.

Imaginons que vous alliez au restaurant. Si vous demandez un plat qui n'est pas sur la carte, le serveur ne pourra pas vous le servir. C'est exactement la même chose avec Angular : si vous demandez un service qui n'a pas été "enregistré" (fourni), Angular ne pourra pas vous le donner !

Comment résoudre l'erreur ?

Voici un exemple:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <p>Voir la console</p>
  `,
})
export class App {
  http = inject(HttpClient);
}

https://stackblitz.com/edit/stackblitz-starters-jyrmfsle?ctl=1&embed=1&file=src%2Fmain.ts&view=preview

Dans l'exemple ci-dessous, l'erreur survient car le HttpClient n'est pas fourni. Voici comment le corriger :

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient() // Ajout du provider HttpClient
  ]
};

CONSEIL

Il est recommandé de toujours fournir les services au niveau le plus approprié :

• Dans appConfig pour les services globaux (comme HttpClient)
• Dans le décorateur @Injectable pour les services spécifiques

Les différentes façons de fournir un service

1. Au niveau du service lui-même avec @Injectable :

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

@Injectable({
  providedIn: 'root' // Le service sera disponible dans toute l'application
})
export class UserService {
  // ...
}

Rappel

Injectable contient providedIn qui permet de fournir le service dans l'application, dans un module ou dans un composant.

2. Au niveau d'un composant avec le décorateur @Component :

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

@Component({
  // ...
  providers: [UserService] // Le service sera disponible uniquement pour ce composant et ses enfants
})

ATTENTION

Si vous utilisez un service dans plusieurs composants, privilégiez la fourniture au niveau root (providedIn: 'root') plutôt qu'au niveau des composants pour éviter d'avoir plusieurs instances du même service.

En savoir plus sur l'injection de dépendances dans Angular : Injection de dépendances dans Angular