Getting this - Error during instantiation of Token(Promise<ComponentRef>)!. #4156
Description
I'm new to angular. Currently playing with it's doc from "https://angular.io/docs/ts/latest/guide/displaying-data.html" .
My files -
show-properties.html
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<display></display>
<script>
System.import('show-properties');
</script>
</body>
</html>
show-properties.ts
// TypeScript
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
@Component({
selector: 'display',
appInjector: [FriendsService]
})
@View({
template: `
<p>My name: {{ myName }}</p>
<p>Friends:</p>
<ul>
<li *ng-for="#name of names">
{{ name }}
</li>
</ul>
`,
directives: [NgFor]
})
class DisplayComponent {
myName: string;
names: Array<string>;
// constructor() {
// this.myName = "Alice";
// this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
// }
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);
When I'm executing above code it's giving me following error -
EXCEPTION: Error during instantiation of Token(Promise)!.
angular2.dev.js:22367 ORIGINAL EXCEPTION: Cannot resolve all parameters for DisplayComponent(undefined). Make sure they all have valid type or annotations.
angular2.dev.js:22367 ORIGINAL STACKTRACE:
angular2.dev.js:22367 Error
at NoAnnotationError.BaseException (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:7735:25)
at new NoAnnotationError (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:9092:63)
at _extractToken (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:25841:13)
at http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:25804:14
at Array.map (native)
at Function.execute.ListWrapper.map (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:8494:26)
at _dependenciesFor (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:25803:24)
at execute.Binding.resolve (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:25933:28)
at Function.execute.metadata.createFromBinding (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:28203:30)
at Function.execute.metadata.createFromType (http://localhost/ngular/node_modules/angular2/bundles/angular2.dev.js:28237:37)
But, when I'm not injecting that CLASS ARRAY property(FriendsService) & using it normally by making following changes it's working fine.
class DisplayComponent {
myName: string;
names: Array<string>;
constructor() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
// constructor(friendsService: FriendsService) {
// this.myName = 'Alice';
// this.names = friendsService.names;
// }
}
Any one, suggest me where i'm doing wrong ?