Angular Dependency Injection – Understanding hierarchical injectors
summary
Shows a hand-built injector (a map of tokens to singletons) and live code that proves how Angular resolves providers across child injector per lazy module and the module/element trees, with eager modules sharing root singletons while lazy modules get separate instances unless marked providedIn: 'root' is tree-shakeable. Demonstrates useClass, useValue, useExisting and useFactory with HttpClient and URL token and resolution flags like self, skipSelf and optional, and the examples visibly return different random numbers so behavior is verifiable.
AI-written summary · about
chapters (17)
- 0:00ANGULAR DEPENDENCY INJECTION
- 1:05What is a dependency?
- 1:22The Problem
- 2:27Solution
- 4:01Dependency Injection in Angular
- 11:21Two injector hierarchies
- 14:57Lazy loaded Module in the Routing!
- 16:43Eagerly loaded Modules
- 17:10Lazy loaded Modules
- 23:49Example of hierarchical dependency injection
- 25:47Provide Services in the Modules
- 30:33Using Providedin in LazyService
- 33:07Add LazyService to the Provider's Array of LazyModule
- 35:52Services in a Component
- 38:33Dependency Providers
- 40:34Unique Injection Token
- 44:43Wrapping up
related talks
01h 00mAngular Dependency Injection In-Depth
57mAngular Dependency Injection, In Depth
29mDI Deep Dive
30mClimbing up injector trees
38mDependency Injection for Future Generations
39mSimplifying DI and Services in Angular
17mDissecting Dependency Injection: Angular and NestJS
39mDeep DI-ving: how Angular's DI system defeated a monolith