Total Guide To Angular 6+ Dependency Injection — providedIn vs providers:[ ] 💉
🤫 Psst! Do you think that NgRx or Redux are overkill for your needs? Looking for something simpler? Check out @angular-extensions/model library!
I know, I know… Angular 7 is out already but this topic is as relevant as ever! Angular 6 brought us new better providedIn
syntax for registration of services into Angular dependency injection mechanism.
As it turned out, this topic can evoke quite emotional responses and there is a lot of confusion across GitHub comments, Slack and Stack Overflow so let’s make this clear once and for all!
📖 What we’re going to learn
- Dependency Injection (DI) recapitulation (optional😉)
- The Old Way™ of doing DI in Angular —
providers: []
- The New Way™ of doing DI in Angular —
providedIn: 'root' | SomeModule
- Possible scenarios when using
providedIn
- Recommendation on how to use new syntax in your projects
- Summary