Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides 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
Import inject from @angular/core and call inject(YourToken) where Angular has established an injection context—often in a field initializer of a class Angular creates. The token must have a provider visible to that class. Angular’s injector supplies the value, and the provider’s location determines which matching value the class receives.
How to inject a dependency into an Angular class
Angular dependency injection retrieves a value by token. A token may be a service class or another JavaScript value; the class receiving it does not create that dependency itself.
A component can request a service in a field initializer:
import { Component, inject } from '@angular/core';
import { PetRosterService } from './pet-roster.service';
@Component({ /* component metadata */ })
export class PetCareDashboard {
petRosterService = inject(PetRosterService);
}This is the property-initializer pattern shown in Angular’s service tutorial. Use your project’s component metadata and service name.
#1 Best Overall
Where inject() works
inject() reads from the currently active injector. Angular supports it during DI-managed construction, in field initializers, in provider or token factories, and in code already running inside an injection context. It is not a general-purpose lookup to call later from an arbitrary method or unrelated code.
For example, a field initializer runs as Angular constructs the class, so it has an injection context. A later event-handler method does not gain one merely because it belongs to an Angular component. If a dependency is needed by ordinary methods, retrieve it in a supported context and retain the reference on the class.
Choose where to provide the token
A token must be registered with an injector that can serve the requesting class. For services, Angular supports automatic provision through injectable metadata. Explicit provider arrays let you register a dependency at a narrower location, such as a component, directive, route, or application configuration. For a non-class value—such as configuration, a function, or a primitive—use an InjectionToken and provide that token.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute| Provider placement | Scope and instance behavior | When it fits |
|---|---|---|
| Application-level provider | Available across a broad application scope; consumers can share the instance supplied by that injector. | A dependency intended to be shared broadly. |
| Component-level provider | Creates a provider at the component’s scope. Descendants can resolve it, and it can shadow a wider-scope provider for the same token. | A dependency intended to be local to a component subtree. |
| Route-level provider | Registered for the route scope rather than at the broadest application scope. | A dependency intended for a route subtree. |
InjectionToken provider |
Supplies a non-class value under its token; the injector hierarchy determines which registration is selected. | Configuration, functions, primitives, or other values that are not service classes. |
Angular resolves dependencies through hierarchical injectors. It uses the first matching provider it encounters, so a nearer registration can take precedence over a broader one. See the official guides on dependency injection and hierarchical dependency injection for provider configuration and lookup behavior.
Rank #3
Why Angular cannot resolve a dependency
If Angular reports that it cannot resolve a token, check these causes in order:
- Token mismatch: confirm the requesting code and provider use the same token. Two tokens with similar names are not necessarily the same value.
- No visible provider: confirm a provider exists in an injector available from the requesting class’s location.
- Unexpected scope: inspect component, route, and application registrations. A local provider may shadow the one you expected.
- Unsupported context: ensure the call to
inject()occurs in a supported injection context rather than a later arbitrary method.
Angular also offers the resolution modifiers optional, self, skipSelf, and host. They alter whether a missing provider is allowed or how far and from where the injector searches. Use them when the intended lookup requires that behavior, rather than as a substitute for checking a missing or misplaced provider.
Test the same provider scope the component uses
For service tests, configure TestBed and retrieve the service from its injector. If a component declares its own provider, the component injector can hold a different instance from the TestBed-level injector. To inspect the instance supplied to that component, retrieve it from the fixture’s component injector instead:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →const service = fixture.debugElement.injector.get(PetRosterService);Angular’s service testing guide describes TestBed service setup. Its component testing guidance also cautions that a test double can make a test behave differently from production, so a passing test with a substitute does not by itself establish identical production behavior.
Check syntax against your Angular version
The examples use Angular’s documented inject() API and provider concepts, but the documentation cited here does not pin a framework release. Confirm decorator names and setup against the Angular version installed in your 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.
