Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular error NG0207 means an EnvironmentProviders value was placed where Angular expects regular providers—most often in a component’s providers array. Move environment-level configuration to bootstrapApplication for app-wide use or to a route’s providers for route-level use. For a component-scoped dependency, provide a regular service or provider instead.
What NG0207 means
Angular uses EnvironmentProviders to group providers intended for an environment injector. A component’s providers array configures a component injector, so placing an environment-provider wrapper there triggers NG0207. Angular’s API describes these as providers “only accepted during creation of an EnvironmentInjector.” See Angular’s EnvironmentProviders API and the NG0207 error reference.
The error message identifies the provider Angular rejected. Common examples are provideHttpClient() and importProvidersFrom(...), both of which return EnvironmentProviders. The problem is their location, not necessarily the provider configuration itself.
Choose a provider location by scope
| Intended scope | Where to put it | Example |
|---|---|---|
| Application-wide | The providers option passed to bootstrapApplication |
providers: [provideHttpClient()] |
| One route and its environment injector | The route configuration’s providers array |
providers: [provideHttpClient(...)] |
| One component | The component’s providers array, using regular providers |
A service class or { provide: API_URL, useValue: '/api' } |
These scopes are not interchangeable syntax choices. Put the provider where the dependency is meant to be available. Angular’s placement examples are in the NG0207 reference.
#1 Best Overall
Move the offending provider
Incorrect: environment provider on a component
@Component({
providers: [provideHttpClient()],
})
export class UserProfile {}For application-wide HTTP configuration
bootstrapApplication(App, {
providers: [provideHttpClient()],
});provideHttpClient configures HttpClient for injection and can take feature functions such as withInterceptors; see the provideHttpClient API.
For route-specific configuration
const routes: Routes = [
{
path: 'admin',
component: AdminView,
providers: [provideHttpClient(withInterceptors([authInterceptor]))],
},
];A route’s providers configure its route environment injector. Use this placement when the configuration should apply to that route rather than the whole application.
For a component-scoped dependency
@Component({
providers: [
UserClient,
{ provide: API_URL, useValue: '/api' },
],
})
export class UserProfile {}Use this pattern for regular component-level providers. Do not move an environment-provider API into the component array simply to make a dependency local.
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 & 11Check the whole providers array
- Read the NG0207 message and note the provider Angular names.
- Inspect the affected component’s entire
providersarray, including helper calls and imported provider collections. A wrapper may be returned indirectly by a helper. - Check the API’s return type instead of guessing from its function name. In particular, Angular documents
provideHttpClient()andimportProvidersFrom(...)as returningEnvironmentProviders. - Choose the intended scope—application, route, or component—and move the provider or replace it with a regular component provider as appropriate.
Special case: importProvidersFrom and older configurations
importProvidersFrom collects providers from NgModules and standalone components. Its result belongs in an application injector or another environment injector, such as a route injector—not in component providers. See the importProvidersFrom API.
Rank #3
Angular’s NgModule API reference types its providers property as (Provider | EnvironmentProviders)[]. That declaration does not mean a component’s providers array accepts environment providers: the relevant distinction is which injector is being configured. In legacy or mixed configurations, verify the behavior against 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.
