Question

我已经按照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)

这是我的代码：

/// <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/bower-traceur-runtime@0.0.87/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>

Answer 1

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

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

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

Answer 2

我遇到了同样的问题。在我的情况下，我从浏览器清空缓存，它工作。

Answer 3

我在快速入门指南后遇到了同样的问题，因此我执行了以下步骤：

1）将FriendsService类创建为新文件（FriendsService.js）：

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

2）在App.js中，按如下方式导入FriendsService：

import {FriendsService} from './FriendsService'

3）引导时添加FriendsService

bootstrap(Hello,[FriendsService]);

完整的App.js代码：

import {ComponentMetadata as Component, ViewMetadata as View, bootstrap, CORE_DIRECTIVES} from 'angular2/angular2';
import {FriendsService} from './FriendsService'

@Component({
    selector: 'hello'
})
@View({
    template: `
      <span *ng-if="name">Hello, {{name}}!</span>
      <p>Friends:</p>
      <ul>
         <li *ng-for="#name of names">
            {{ name }}
         </li>
      </ul>
    `,
    directives: [CORE_DIRECTIVES]
})
export class Hello {
    name: string = 'World';
    names: Array<string>;
    constructor(friendsService: FriendsService) {
      this.names = friendsService.names;

      setTimeout(() => {
        this.name = 'NEW World'
      }, 2000);
    }
}

bootstrap(Hello,[FriendsService]);

Answer 4

在我的案例中，模板定义是错误的：

代码产生异常的原因：

<button class="btn" (click)="onLogout()>Logout</button>

好的代码：

<button class="btn" (click)="onLogout()">Logout</button>

在实例化令牌（Promise <componentref>）期间出现错误＆＃34;错误！＆＃34;与angular2-alpha36

4 个答案: