CODEWITHSUNDEEP
typescriptangular
Suresh
Suresh

Reputation: 5987

Angular 2 error - Error during instantiation of Token(Promise<ComponentRef>)!

I'm new angular world. Currently in process of learning by following their docs from "https://angular.io/docs/ts/latest/guide/displaying-data.html". Now, I've stuck at one point.

I've 2 files. i - 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>

ii - show-properties.ts

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 this it's working fine but, the moment I'm injecting 'FriendsService' class to provide the model with the list of friends by doing following changes - 

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;
    }
}

I'm getting following error in my chrome console.

enter image description here Any body help me fig out what's going wrong at here.

Upvotes: 1

Views: 1021

Answers (1)

alexpods
alexpods

Reputation: 48487

appInjector was removed in alpha-29. Now you must use bindings and viewBindings instead of it:

@Component({
  selector: 'display',
  bindings: [FriendsService]
})
@View({
  // view ...
})
class DisplayComponent { /* component ... */ }

This plunker works pretty well.

Upvotes: 3

Related Questions