得到一个错误"Error during instantiation of Token(Promise<ComponentRef>)！“带角度2-字母36
得到一个错误"Error during instantiation of Token(Promise<ComponentRef>)！“带角度2-字母36
提问于 2015-09-04 16:02:40
我已经按照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/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>回答 4
Stack Overflow用户
发布于 2016-03-05 11:00:10
尽管这不是OP中的问题，但是如果您错误地在您的装饰器后面添加了分号，您也会得到这个错误：
@Component({
selector: 'my-app',
template: `...`
}); // <--- this extraneous ';' will cause the error
export class AppComponent {
...
}通常，此错误可能是由于您传递给@Component的配置对象中某处的拼写错误造成的。例如，另一个答案提到了未闭合的字符串，即缺少"。
Stack Overflow用户
发布于 2015-09-05 16:26:38
我也遇到过同样的问题。在我的例子中，我从浏览器中清空了缓存，并且它起作用了。
Stack Overflow用户
发布于 2015-10-05 08:42:42
按照快速入门指南，我也遇到了同样的问题，因此我执行了以下步骤：
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]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32393040
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号