adev/src/content/reference/errors/NG0207.md
This error occurs when EnvironmentProviders are used in a context that only accepts regular providers, such as a component's providers array. Environment providers are designed for application-wide configuration and can only be used in environment injectors (like the root injector configured in bootstrapApplication or route configurations).
provideHttpClient() in component providersFunctions like provideHttpClient() return EnvironmentProviders, which cannot be used at the component level:
@Component({
providers: [
provideHttpClient(), // ERROR: EnvironmentProviders can't be used here
],
})
export class UserProfile {}
importProvidersFrom() in component providersThe importProvidersFrom() function also returns EnvironmentProviders:
@Component({
providers: [
importProvidersFrom(SomeModule), // ERROR: can't be used for component providers
],
})
export class DataView {}
Move the environment providers to an appropriate location:
Configure environment providers in bootstrapApplication:
bootstrapApplication(App, {
providers: [provideHttpClient(), importProvidersFrom(SomeModule)],
});
Use the providers array in route configurations:
const routes: Routes = [
{
path: 'admin',
component: AdminView,
providers: [provideHttpClient(withInterceptors([authInterceptor]))],
},
];
If you need component-scoped services, use regular providers instead of environment providers:
@Component({
providers: [
UserClient, // Regular provider - this works
{provide: API_URL, useValue: '/api'}, // Value provider - this works
],
})
export class UserProfile {}
The error message specifies which provider caused the issue. Check that all items in your component's providers array are regular providers, not environment providers returned by functions like provideHttpClient(), provideRouter(), or importProvidersFrom().