EnvironmentProviders dans le mauvais contexte

Cette erreur survient lorsque des EnvironmentProviders sont utilisés dans un contexte qui n'accepte que des providers classiques, comme le tableau providers d'un composant. Les providers d'environnement sont conçus pour la configuration à l'échelle de l'application et ne peuvent être utilisés que dans des injectors d'environnement (comme l'injector racine configuré dans bootstrapApplication ou les configurations de routes).

Scénarios courants

Utiliser provideHttpClient() dans les providers d'un composant

Les fonctions comme provideHttpClient() renvoient des EnvironmentProviders, qui ne peuvent pas être utilisés au niveau d'un composant :

@Component({
  providers: [
    provideHttpClient(), // ERROR: EnvironmentProviders can't be used here
  ],
})
export class UserProfile {}

Utiliser importProvidersFrom() dans les providers d'un composant

La fonction importProvidersFrom() renvoie elle aussi des EnvironmentProviders :

@Component({
  providers: [
    importProvidersFrom(SomeModule), // ERROR: can't be used for component providers
  ],
})
export class DataView {}

Déboguer l'erreur

Déplacez les providers d'environnement vers un emplacement approprié :

Pour les providers à l'échelle de l'application

Configurez les providers d'environnement dans bootstrapApplication :

bootstrapApplication(App, {
  providers: [provideHttpClient(), importProvidersFrom(SomeModule)],
});

Pour les providers propres à une route

Utilisez le tableau providers dans les configurations de routes :

const routes: Routes = [
  {
    path: 'admin',
    component: AdminView,
    providers: [provideHttpClient(withInterceptors([authInterceptor]))],
  },
];

Pour les services au niveau d'un composant

Si vous avez besoin de services limités à la portée d'un composant, utilisez des providers classiques plutôt que des providers d'environnement :

@Component({
  providers: [
    UserClient, // Regular provider - this works
    {provide: API_URL, useValue: '/api'}, // Value provider - this works
  ],
})
export class UserProfile {}

Le message d'erreur précise quel provider a causé le problème. Vérifiez que tous les éléments du tableau providers de votre composant sont des providers classiques, et non des providers d'environnement renvoyés par des fonctions comme provideHttpClient(), provideRouter() ou importProvidersFrom().