angularjs 2.0: Can't inject anything through component constructor()

Question

I am creating a sample application in angularjs 2.0. While developement I came across with a serious problem - I can\'t inject anything to the component through the construc

Answer 1

You code is fine!

Here is your updated plunker: https://plnkr.co/edit/6SR8Ibljuy0ElEBU87ox?p=preview

Did some changes to your system.js.config!

   // ADDED THESE TWO OPTIONS BELOW

   //use typescript for compilation
   transpiler: 'typescript',
   //typescript compiler options
   typescriptOptions: {
      emitDecoratorMetadata: true
   },

and this..

app: {
   main: './main.ts',     // CHANGES HERE
   defaultExtension: 'ts' // CHANGES HERE
},

Answer 2

I see that your tsconfig.json isn't correct.

{ 
  "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": false, 
    "emitDecoratorMetadata": true, <== it should be true 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "dist" 
  } 
} 

This is the magic sauce for DI. emitDecoratorMetadata: true. This option will preserve type information in your object's metadata.

See also

• How does the TypeScript Angular DI magic work?
• Injecting services in services in Angular 2