GOT AN ERROR“在令牌(Promise)实例化期间出错！.”与angular2-alpha36

我已经按照angular2的官方指南来学习angular2.当我使用angular2-alpha28时,一切顺利！当将angular2更改为alpha36时,它无法工作！它显示以下错误：

EXCEPTION: Error during instantiation of    Token(Promise<ComponentRef>)!.
angular2.dev.js:22746 ORIGINAL EXCEPTION: TypeError: Cannot read property 'toString' of undefined
angular2.dev.js:22746 ORIGINAL STACKTRACE:
angular2.dev.js:22746 TypeError: Cannot read property 'toString' of undefined
    at new InvalidBindingError (angular2.dev.js:9171)
    at _resolveBindings (angular2.dev.js:27377)
    at Function.execute.Injector.resolve (angular2.dev.js:28030)
    at Function.execute.DirectiveBinding.createFromBinding (angular2.dev.js:28611)
    at Function.execute.DirectiveBinding.createFromType (angular2.dev.js:28643)
    at execute.Compiler._bindDirective (angular2.dev.js:29892)
    at execute.Compiler.compileInHost (angular2.dev.js:29908)
    at execute.DynamicComponentLoader.loadAsRoot (angular2.dev.js:17421)
    at angular2.dev.js:30555
    at Injector.execute.Injector._instantiate (angular2.dev.js:27893)

这是我的ts代码：

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

@Component({
  selector: "my-app",bindings: [FriendsService]
})

@View({
  template: `<h1>Hello {{ name }}</h1>
    <p>Friends:</p>
  <ul>
    <li *ng-for="#name of names">{{ name }}</li>
  </ul>
  <p *ng-if="names.length > 3">Has many friends!</p>
  <input #myname (keyup)>
  <p>{{myname.value}}</p> 
  <input #nametext>
  <button (click)="addName(nametext.value)">Add Name</button>
  `,directives: [NgFor,NgIf]
})

//Component controller
class MyAppComponent {
  name: string;
  names: Array<string>;

  constructor(@Inject(forwardRef( () => FriendsService )) friendsService: FriendsService) {
    this.name = 'Alice';
    this.names = friendsService.names;
  }
  addName(name: string) {
    this.names.push(name);
  }
  doneTyping($event) {
    if($event.which === 13) {
      this.addName($event.target.value);
      $event.target.value = null;
    }
  }
}

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

bootstrap(MyAppComponent,[FriendsService]);

和HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <title>Angular 2 Quickstart</title>
  <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
  <script src="https://jspm.io/system@0.16.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.36/angular2.dev.js"></script>
</head>
<body>
  <my-app></my-app>
  <script>System.import('app');</script>
</body>
</html>

解决方法

虽然这不是OP中的问题,但是如果你错误地在你的装饰者之后添加了一个分号,你也会得到这个错误：

@Component({
   selector: 'my-app',template: `...`
});  //  <--- this extraneous ';' will cause the error
export class AppComponent {
  ...
}

通常,此错误可能是您传递给@Component的配置对象中某处的拼写错误的结果.例如,另一个答案提到了一个未封闭的字符串,即缺少“.

GOT AN ERROR“在令牌(Promise)实例化期间出错！.”与angular2-alpha36

解决方法

相关推荐