Dependency Injection Hierarchy

Visualize Angular's Hierarchical Dependency Injector. When a component requests a dependency, Angular starts at the element injector and walks up the tree until it finds a provider or throws a NullInjectorError at the top.

Platform Injector

platform injector
ProvidersPlatformRef

Root Injector

root injector
ProvidersGlobalServiceHttpClient

Comp A

element injector
ProvidersLocalService

Comp B

element injector
ProvidersNone

Trigger Dependency Request

Pretend Component B has requested an injection token in its constructor. Pick a token to resolve:

Resolution Log

Awaiting resolution events...