Angular Dependency Injection

June 16th, 2022
Angular Dependency Injection

It is the most powerful and distinguishing features of Angular is its built-in dependency injection system. Dependency injection just works, to its very convenient and intuitive Angular API. But we need to go deeper into the dependency injection system, and configure it manually.

There are some dependency injection will be necessary like,

  • Troubleshoot some weird dependency injection error
  • Configure the dependencies for a unit test
  • Understand the unusual dependency injection configuration of some of the third-party module
  • Create a third-party module for shipped and used in multiple applications
  • Design application in a modular way
  • Ensure different parts of the application that are well isolated and can't interfere with each other

Introduction to Dependency Injection

When we are developing a smaller part of your system, like a module or a class, you are going to need some external dependencies.

For example, you need an HTTP service to make backend calls,also some of other dependencies.

Dependency injection from scratch in Angular

There is the best way to understand dependency injection in Angular, is that take a plain Typescript class without any decorators applied to it, and turn it into an Angular injectable service manually, from scratch.

Angular Dependency Injection Provider

Some time we get error message like "no provider" that means Angular dependency injection system can't instantiate those requrired dependency, that they don’t know how to create it.

It is most important thing to understand that every single dependency in your application, be it a service or a component or anything else, some time there is a plain function that is being called that knows how to create your dependency.

Introduction to Injection Tokens

Every time, how Angular knows that what to inject where and what provider factory functions to call to create which dependency?

Angular needs classify dependencies, that identify to a given set of dependencies are all of the same type. In order to uniquely identify a category of dependencies, so we can define what is known as an Angular injection token.

Manually configure of a provider

For this we need both the provider factory function and the injection token, we can configure a provider in the Angular dependency injection system, that it will know how to create instances of CoursesService if needed.

Configuring the Dependency Injection Resolution mechanism

The resolution mechanism for Angular component dependency injection every time starts with the current component, and scans for matching providers of the root component of the application, and if it doesn't find a matching dependency then it throws an error.

Conclusion

Dependency system is very flexible also it has a ton of powerful configuration options. Its mostly commonly used syntax of simply just dropping a class name into a list of providers is very easy to use. This is how the dependency injection system works in detail will always be a very useful when you are designing our application in the most modular way.