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

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 constructor function.
This is the plnkr url : https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK?p=preview
I used the following code for importing ItemService from app.item.service.ts
import { ItemService } from './app.item.service';
Then I specified provider as
#Component({
selector: 'list-todo',
template: `
<ul>
<li *ngFor="let item of items">{{item.text}}</li>
</ul>
`,
providers : [ItemService]
})
After that, given code for TodoComponent as
export class TodoComponent implements OnInit {
items:Array<Object> = [];
constructor(private itemService: ItemService){ //here is the problem
}
ngOnInit(){
this.getItems();
}
getItems(){
this.items = this.itemService.getItems();
}
}
When I try to inject ItemService through constructor , I am getting an error : " Error: Can't resolve all parameters for TodoComponent: (?)."
I am not able to inject even angularjs providers like Injector.
However, this method works for me :
const injector = ReflectiveInjector.resolveAndCreate([ItemService]);
this.itemService = injector.get(ItemService);
I am using the following versions of libraries for developement as mentioned in my package.json
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings":"^1.3.2"
}
Angular version: 2.0.0 final
Browser: all
attaching the error log I got from console :
(index):16 Error: Error: Can't resolve all parameters for TodoComponent: (?).
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14404:21)
at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14301:28)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14074:30)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14167:51)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14161:51)
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16803:49)
at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16741:39)
at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16732:23)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:6954:29)
Evaluating http://localhost:3000/dist/main.js
Error loading http://localhost:3000/dist/main.js(anonymous function) # (index):16ZoneDelegate.invoke # zone.js:203Zone.run # zone.js:96(anonymous function) # zone.js:462ZoneDelegate.invokeTask # zone.js:236Zone.runTask # zone.js:136drainMicroTaskQueue # zone.js:368ZoneTask.invoke # zone.js:308

Answer 1

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

Answer 2

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
},