GOT AN ERROR“Token（Promise <ComponentRef>）实例化时出错！”与angular2-alpha36

问题描述：

我已经按照angular2的官方指南学习angular2.当我使用angular2-alpha28时，一切都会好的！当改变angular2到alpha36，它dose'nt工作，它显示如下错误：GOT AN ERROR“Token（Promise <ComponentRef>）实例化时出错！”与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/[email protected]"></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>

这很奇怪。我试过你的代码，我没有得到那个错误信息。你确定是你的所有代码吗？ –

随着alpha.36我不得不升级system.js和traceur。不知道这是否是这个问题，但我看到您的示例仍然运行在旧版本上。我有一个使用alpha.36的工作项目。 http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples – TGH

答

我已经遭受同样的问题。在我的情况下，我从浏览器清空缓存，它工作。

答

我还不能跟上快速入门指南相同的问题，所以我做了以下步骤：

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

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

2）应用.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]);

答

在我的情况是错字在模板定义：

代码是什么产生异常：

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

好的代码：

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

答

虽然这是不是在OP的问题，你也可以得到这样的错误，如果你误你的装饰后添加一个分号：

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

在一般情况下，这种错误可能是拼写错误的结果在配置对象的某处，您传递给@Component。例如，另一个答案提到一个未封闭的字符串，即缺少"。

GOT AN ERROR“Token（Promise ）实例化时出错！”与angular2-alpha36

相关推荐