Visual Studion 2015 and Angular2 Beta 2 dependency injection - dependency-injection

Question

My environment is VS2015 with TypeScript 1.7.3, Angular2 Beta 2, target ECMA 5. I've modified the csproj file to include TypeScriptExperimentalDecorators = true.
I'm working on the Angular2 tutorial and can not get dependency injection working as documented. I can only get DI to work when I include #Inject in the AppComponent class constructor. If I don't include #Inject I receive this error -
EXCEPTION: Cannot resolve all parameters for AppComponent(?). Make sure they all have valid type or annotations.
I did not include the code in this post because its the same as the tutorial. I did try modifying boot.ts as follows:
bootstrap(AppComponent, [HeroService]);
but I still get the error. Has anyone else run into this?
The HeroService is decorated with #Injectable:
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Injectable} from '../node_modules/angular2/core';
#Injectable()
export class HeroService {
heroes: Hero[];
getHeroes() {
return Promise.resolve(HEROES);
}
// See the "Take it slow" appendix
getHeroesSlowly() {
return new Promise<Hero[]>(resolve =>
setTimeout(() => resolve(HEROES), 2000) // 2 seconds
);
}
}
app.component.ts
import {Component, OnInit, Inject} from '../node_modules/angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes"
(click)="onSelect(hero)"
[class.selected]="hero === selectedHero">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
`
,directives: [HeroDetailComponent]
,providers: [HeroService]
})
export class AppComponent implements OnInit {
public title = 'Tour of Heroes';
public heroes: Hero[];
public selectedHero: Hero;
constructor(private _heroService: HeroService) {
// constructor( #Inject(HeroService) private _heroService: HeroService) {
}
getHeroes() {
this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
ngOnInit() {
this.getHeroes();
}
onSelect(hero: Hero) { this.selectedHero = hero; }
}

Answer 1

I solved the problem by adding the following to the csproj file and was able to remove the #Inject from the code -
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
See here for how to set TS compiler options in Visual Studio