Angular 2 error:

Question

Playing with Angular 2 and trying to get this simple code to work. but I still get the error message:

EXCEPTION: Cannot resolve all options for the tab (undefined). Make sure they all have valid type or annotations.

Until ng2 enters onstructor(tabs:Tabs) {… in constructor in c

Here is the whole code:

 ///<reference path="../../typings/zone.js/zone.js.d.ts"/> import {Component, Input} from 'angular2/core'; @Component({ selector: 'tab', template: ` <ul> <li *ngFor="#tab of tabs" (click)="selectTab(tab)"> {{tab.tabTitle}} </li> </ul> <ng-content></ng-content> `, }) export class Tab { @Input() tabTitle: string; public active:boolean; constructor(tabs:Tabs) { this.active = false; tabs.addTab(this); } } @Component({ selector: 'tabs', directives: [Tab], template: ` <tab tabTitle="Tab 1"> Here some content. </tab> `, }) export class Tabs { tabs: Tab[] = []; selectTab(tab: Tab) { this.tabs.forEach((myTab) => { myTab.active = false; }); tab.active = true; } addTab(tab: Tab) { if (this.tabs.length === 0) { tab.active = true; } this.tabs.push(tab); } } 

TX

Sean

Answer 1

This is because your Tabs class is defined after the Tab class and classes in javascript are not raised .

So, you should use forwardRef to refer to an undefined class.

 export class Tab { @Input() tabTitle: string; public active:boolean; constructor(@Inject(forwardRef(() => Tabs)) tabs:Tabs) { this.active = false; tabs.addTab(this); } } 

Answer 2

You have two solutions: Make your tabs global at boot time:

 bootstrap(MainCmp, [ROUTER_PROVIDERS, Tabs]); 

Enter locally tabs with a binding property,

 @Component({ selector: 'tab', bindings: [Tabs], // injected here template: ` <ul> <li *ngFor="#tab of tabs" (click)="selectTab(tab)"> [...]