Angular error NG0207 means an EnvironmentProviders value was placed where Angular expects regular providers—often in a component’s providers array. Move environment providers to an environment injector: use bootstrapApplication for application-wide setup or a route’s providers array for route-specific setup. For component-scoped dependencies, provide a service or token value directly.
What NG0207 means
EnvironmentProviders encapsulates providers intended for an EnvironmentInjector. Angular uses this wrapper to help prevent environment-level configuration from being added accidentally to a component injector. A component’s providers array is for regular providers, so putting an environment provider there triggers NG0207. Angular’s NG0207 reference identifies the offending provider in the error message.
As an Amazon Associate I earn from qualifying purchases.
Common examples are provideHttpClient() and importProvidersFrom(...). Both return EnvironmentProviders, so their location matters. The provideHttpClient API configures HttpClient and supports feature functions such as withInterceptors. The importProvidersFrom API collects providers from NgModules and standalone components.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How to find the misplaced provider
- Read the NG0207 message and note the provider Angular names.
- Open the component or configuration associated with the error and inspect its complete
providersarray. - Check not only direct entries but also helper calls and imported provider collections. If an API is unfamiliar, verify its return type rather than guessing from its name.
- Choose the provider location according to the intended scope: application-wide, route-specific, or component-specific.
Angular’s EnvironmentProviders API reference describes these encapsulated providers as accepted only during creation of an environment injector.
#1 Best Overall
Put the provider in the injector that matches its scope
| Intended scope | Where to configure it | Example |
|---|---|---|
| Application-wide | The providers option passed to bootstrapApplication. |
providers: [provideHttpClient()] |
| Route-specific | The route configuration’s providers array. |
providers: [provideHttpClient(...)] |
| Component-specific | The component’s providers array, using regular providers. |
A service class or { provide: API_URL, useValue: '/api' } |
These are distinct injector scopes, not interchangeable ways to write the same configuration. Use environment providers for application or route configuration; use regular providers for dependencies that belong to a component.
Before-and-after examples
Incorrect: environment provider in a component
@Component({
providers: [provideHttpClient()],
})
export class UserProfile {}provideHttpClient() returns EnvironmentProviders, making this component-level placement invalid.
Application-wide configuration
bootstrapApplication(App, {
providers: [provideHttpClient()],
});Use this placement when the HTTP client configuration is intended for the application’s environment injector.
Route-specific configuration
const routes: Routes = [
{
path: 'admin',
component: AdminView,
providers: [provideHttpClient(withInterceptors([authInterceptor]))],
},
];A route’s providers configure the route injector. Angular’s provider guidance also describes environment-provider placement for route-level configuration.
Rank #3
Component-scoped dependencies
@Component({
providers: [
UserClient,
{ provide: API_URL, useValue: '/api' },
],
})
export class UserProfile {}Use this pattern when the service or value should be provided at the component level. Do not put an environment-provider wrapper in this array.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Note for NgModule and mixed configurations
The NgModule API reference types its providers property as (Provider | EnvironmentProviders)[]. That type should be understood in the intended environment-injector context; it does not mean that a component’s providers accept EnvironmentProviders. In legacy or mixed configurations, check the behavior and API documentation for the Angular version installed in the project.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
