GOT AN ERROR "Error during instantiation of Token(Promise)!." with angular2-alpha36

Question

I've followed the angular2's official guides to learn angular2.When I'm using angular2-alpha28,everything goes ok! When change angular2 to alpha36, it dose'nt work!It show errors below:

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)

here is my ts code:

/// <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]);

and 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>

Mark Rajcok · Accepted Answer

Although this was not the problem in the OP, you can also get this error if you mistakenly add a semicolon after your decorator:

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

In general, this error is probably the result of a typo somewhere in the config object that you pass to @Component. E.g., one other answer mentioned an unclosed string, i.e., a missing ".

GOT AN ERROR "Error during instantiation of Token(Promise<ComponentRef>)!." with angular2-alpha36

Tags:

angular

jack-nie

1 Answers

Mark Rajcok

Recent Activity

Donate For Us