The Hierarchy of Injectors in Angular (and Why You Should Care)

🔍 Understanding Angular Injector Hierarchy – Made Easy
Welcome back to the channel! In this video, we break down one of Angular’s most powerful but confusing features: the Dependency Injection (DI) hierarchy.

🚀 Whether you're struggling with how Angular resolves services across environment and element injectors, or you're curious about viewProviders, providers, and makeEnvironmentProviders(), this lesson will guide you step by step.

📌 What you’ll learn:

How Angular resolves dependencies in nested component trees

The difference between element injectors and environment injectors

The role of NullInjector and PlatformInjector

How route-level and lazy-loaded feature injectors work

Why viewProviders don't affect projected content

Best practices for service placement and performance

🧪 In the second half, follow along in a hands-on lab where we:

Override services at different levels

Use makeEnvironmentProviders() properly

Explore real DI behavior with emojis, directives, and lazy routes

👨‍💻 About your instructor
Hi, I’m Maksym Grom! This channel is all about web development with a focus on Angular. If you’re building modern apps and want to understand the core of Angular’s architecture—you're in the right place.

👉 Don’t forget to like, subscribe, and check out the rest of the playlist on Angular Dependency Injection!

00:00 Intro
00:51 Hierarchy of Injectors
04:05 How Angular resolves dependency
07:20 makeEnvironmentProviders
07:46 Practice component providers
09:18 viewProviders advanced example
11:31 directive and component providers
12:15 directive and tag providers
12:45 lazy loaded routes
14:42 Summary

Видео The Hierarchy of Injectors in Angular (and Why You Should Care) канала Hrom Maksym