/ angular

Angular (2+): What does the @Injectable() decorator do?

If you've looked at the description for the @Injectable() decorator in your Visual Studio Code, you'll see something like this:

Angular's Injectable decorator description

Look at that interface.. It's blank! 😕

So why do we need it? The Angular documentation says this:

When Angular creates a class whose constructor has parameters, it looks for type and injection metadata about those parameters so that it can inject the right service.

If Angular can't find that parameter information, it throws an error.

Angular can only find the parameter information if the class has a decorator of some kind. While any decorator will do, the @Injectable() decorator is the standard decorator for service classes.

Read the last sentence again: "...any decorator will do...". You can actually make your own decorator and use that instead of the @Injectable() decorator and your services will work. So it's actually just a quirk with Typescript and Angular's injectors needing a decorator to handle dependency injection correctly.

Recently, I attended an Angular workshop led by Google Developer Expert Nir Kaufman where he revealed this enlightening fact. Props to him for showing me this!