GOT AN ERROR "Errore durante l'istanziazione del token (Promise <ComponentRef>) !." con angular2-alpha36

Ho seguito le guide ufficiali di angular2 per imparare angular2. Quando utilizzo angular2-alpha28, tutto va bene! Quando il cambiamento angular2 a alpha36, è dose'nt funziona Essa mostra gli errori di seguito:!GOT AN ERROR "Errore durante l'istanziazione del token (Promise <ComponentRef>) !." con 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)

Ecco il mio codice 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]);

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

fonte

2015-09-04 jack-nie

Questo è strano. Ho provato il tuo codice e non ho ricevuto il messaggio di errore. Sei sicuro che sia tutto il tuo codice? –

Con alpha.36 ho dovuto aggiornare system.js e traceur. Non sono sicuro se questo è il problema qui, ma vedo che il tuo campione gira ancora sulle vecchie versioni. Ho un progetto di lavoro qui usando alpha.36. http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples – TGH

ho sofferto per lo stesso problema. Nel mio caso svuoto la cache dal browser e ha funzionato.

fonte

2015-09-05 08:26:37

Ho avuto lo stesso problema seguendo la guida di avvio rapido così ho fatto i seguenti passaggi:

1) Creare la classe FriendsService come nuovo file (FriendsService.js):

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

2) In App .js, importazione FriendsService come segue:

import {FriendsService} from './FriendsService'

3) Aggiungi FriendsService quando bootstrapping

bootstrap(Hello,[FriendsService]);

Il codice completo 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]);

fonte

2015-10-05 00:42:42

Nel mio caso è stato errore di battitura nella definizione del modello:

Codice ciò che produce un'eccezione:

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

buon codice:

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

fonte

2016-02-09 04:36:14 mnv

Anche se questo non era il problema nel PO, è anche possibile ottenere questo errore se si aggiunge erroneamente un punto e virgola dopo la vostra decoratore:

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

In generale, questo errore è probabilmente il risultato di un errore di battitura da qualche parte nell'oggetto di configurazione che si passa a @Component. Ad esempio, un'altra risposta ha menzionato una stringa non chiusa, vale a dire uno " mancante.

fonte

2016-03-05 03:00:09

GOT AN ERROR "Errore durante l'istanziazione del token (Promise <ComponentRef>) !." con angular2-alpha36

risposta

Problemi correlati