angular.js - Angular 2 appInjector causing error issue

Question

According to https://angular.io/docs/js/latest/guide/displaying-data.html step by step, there is a problem with the reference class.

TypeScript compilation:

tsc --watch -m commonjs

"compilerOptions": {
    "emitDecoratorMetadata": true,
    "module": "amd",
    "target": "es5"
}

The original code is:

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';

@Component({
  selector: 'display',
  appInjector: [FriendsService]
})

@View({
  template: `
  <p>My name is {{ myName }}</p>
  <p>Friends:</p>
  <ul>
     <li *ng-for="#name1 of names">
        {{ name1 }}
     </li>
  </ul>
  `,
  directives: [NgFor]
})

class DisplayComponent {
  myName: string;
  names: Array<string>;
  constructor(friendsService: FriendsService) {
    this.myName = 'Alice';
    this.names = friendsService.names;
  }
}

class FriendsService {
  names: Array<string>;
  constructor() {
    this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  }
}

bootstrap(DisplayComponent);

Answer 1

Just move FriendsService to it

Answer 2

https://github.com/kittencup/angular2-ama-cn/issues/11 has specific solutions