Angular Stream
En direct le 31 mars à 18h30

Apprendre Angular en 1h

Je me donne un objectif: vous faire découvrir et apprendre Angular en 1 heure: composant, syntaxe dans les templates, les directives, les signaux, les routeurs, les services, l'injection de dépendances, les observables et les requêtes HTTP. Le nécessaire pour faire une application Angular !.

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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:

typescript
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 :

typescript
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 :
typescript
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.

  1. Au niveau d'un composant avec le décorateur @Component :
typescript
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