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

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



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

So why do we need it? The Angular documentation says this:
At runtime, injectors can read class metadata in the transpiled JavaScript code and use the constructor parameter type information to determine what things to inject.
Not every JavaScript class has metadata. The TypeScript compiler discards metadata by default. If the emitDecoratorMetadata compiler option is true (as it should be in the tsconfig.json), the compiler adds the metadata to the generated JavaScript for every class with at least one decorator.
While any decorator will trigger this effect, mark the service class with the @Injectable() decorator to make the intent clear.
Read the last sentence again: "...any decorator will [work]...". 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. So props to him for showing me this!

Comments

Post a Comment

Popular posts from this blog

Angular (2+): Core vs Shared Modules

Angular: Core vs Shared Modules If you're new to Angular, you might get confused between these two commonly used modules. So what do you put in either components?  What goes in CoreModule? Your CoreModule contains code that will be used to instantiate your app and load some core functionality.  The clearest and most important use of the CoreModule is the place to put your global/HTTP services. The idea is to make sure only one instance of those services will be created across the entire app. The CoreModule, by convention, is only included in your entire app once in AppModule (only in the "import" property of the "@NgModule()" decorator inside your main app.module.ts, not in any other module's "import") and this will ensure services inside it will be only created once in the entire app. This is especially important if you intend to lazy-load your feature modules. Since lazy-loaded modules are loaded on demand (eg when you access the rou...
Read more

Home Improvement: How to Make Your Toilet Flush Stronger.. Without Opening Toilet Tank

Disclaimer: This only works with traditional toilets with the toilet tanks that you find in residential buildings and if nothing is broken in your toilet!  TLDR: Hold down the flush lever a little longer than usual. Toilet Basics: If you're new to toilet terminology, there's a distinction between toilet tank, which is the part that houses the lever, water, and all these parts you see in diagram, and toilet bowl, which is the part you excrement goes in and out of. Here's a diagram of what my toilet tank parts looked like: Toilet tank parts diagram. Courtesy of https://removeandreplace.com/2013/09/09/fix-toilet-constantly-running-diy-toilet-repair-step-step/. So the problem: the past couple of days, I noticed one of the toilets in my home sounded like it was running a water leak constantly. After some Googling and watching toilet repair videos on Youtube, I was able to diagnose the issue - a faulty flapper (the red part in the diagram) - by lifting the toilet ...
Read more

Food: How Carrot-Coconut Sunny-Side-Up Egg is Made

I was watching Netflix's "The Mind of a Chef" and came across this interesting creation called Carrot-Coconut Sunny-Side-Up from Wylie Dufresne (Season 1 Episode 9 at around 13:20). He was able to create something with the consistency and look of an egg without using any eggs. What fascinated me was the combination of ingredients and cooking methods. The egg white is made with: Coconut milk Cardamom Sugar Locus bean gum Guar gum Xanthan gum All that is mixed into a pot and simmered and mixed. After some undisclosed time, it is simply scooped out and put on the serving plate where it will immediately cool down and congeal to the "egg white."  The egg yolk is made with: Carrot juice Smoked maple syrup Salt Glucose (so it doesn't freeze solid) Xanthan gum (to give egg yolk consistency) The egg yolk covering/gel is made with: Water Kappa carrageenan gum Locus bean gum The egg yolk ingredients are mixed, put into a mold that re...
Read more