“EXCEPTION: Unexpected directive value 'undefi

Question

I have two AngularJS 2.0 components:

Comment :

import {Component, Injectable, View, Input} from 'angular2/core';
import {Comments} from './comments.component';

@Injectable()

@Component({
    selector: 'comment'
})

@View({
    templateUrl: 'res/templates/components/comment.component.html',
    directives: [Comments]
})

export class Comment {
    @Input() comment;
    @Input() commentable = false;
}

Comments :

import {Component, Injectable, View, Input} from 'angular2/core';
import {CommentsService} from './../services/comments.service';
import {RouteParams} from 'angular2/router';
import {Comment} from './Comment.component';

@Injectable()

@Component({
    selector: 'comments',
    providers: [CommentsService]
})

@View({
    templateUrl: 'res/templates/components/comments.component.html',
    directives: [Comment]
})

export class Comments {
    @Input() ID;
    public comments;
    public commentsService: CommentsService;
    public routeParams: RouteParams;

    constructor (routeParams: RouteParams, commentsService: CommentsService) {
        var self = this;

        self.routeParams = routeParams;
        self.commentsService = commentsService;
    }

    ngOnInit()   {
        var self = this;

        if (self.ID !== undefined)
            self.comments = self.commentsService.comments[self.ID];
        else if (self.routeParams.params['id'] !== undefined)
            self.comments = self.commentsService.comments[self.routeParams.params['id']];
        else
            self.comments = undefined;
    }
}

comment.template :

<div class="post">
    <div class="author-pic"></div>
    <div class="body">
        <h2 class="title">{{comment.author.name}} {{comment.author.surname}}</h2>
        <h3 class="title">{{comment.publication | date:"MM/dd/yy"}}</h3>
        <p>{{comment.body}}</p>
    </div>
    <comments *ngIf="commentable" [ID]="comment.ID"></comments>
</div>

comments.template :

<div *ngIf="comments !== undefined">
    <comment *ngFor="#comment of comments" [comment]="comment" [commentable]="true"></commento>
</div>

In Comments' template I have an Angular Loop that prints multiple Comment components. In Comment's template I have an Angular ngIf that, if var commentable is true, prints a Comments component. When I run it I get:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Comment'

Answer 1

I often get this error when I've imported something that doesn't exist. Usually this means there's a misspelling in my import or something of the same nature.

For instance I get this error when I try to import:

import {Comment} from './Comment.component';

When I actually mean:

import {CommentComponent} from './Comment.component';

Answer 2

A circular TypeScript import dependency can cause this. (I just ran into this)

For me:

1. A is the parent component, and imports and exports B, C, D. for convenience.

2. A tries to render B

3. B imports C from A and tries to render C.

As soon as I add C to the directives block of B, I get that error (whether it is in B's template or not.) Really, since A depends on B, the minute I import anything from A into B's block I get

Unexpected directive value 'undefined'

@Eirc Martinez is right and you'll have to find a way around that circular dependency.

Answer 3

There is a way to solve the circular dependency problem.

import {forwardRef} from 'angular2/core';
import {Comment} from './Comment.component';

...
directives: [forwardRef(() => Comment)]
})

I have tried this with 2.0.0-beta.10 and it works fine. See comment by tlancina in this issue report on github for more information.

Answer 4

I got a problem something like that. Although this is case sensitive problem. Finally solve this.

courses.component.ts

import {Component} from 'angular2/core'

@Component({
selector: 'courses',
template: '<h2>Courses</h2>'
})

export class coursesComponent{

}

The mistake is coursesCompomnent class should be CoursesCompomnent. Just C is capital letter.

app.component.ts

import { Component } from 'angular2/core';
import{CoursesComponent} from './courses.component';

@Component({
selector: 'my-app',
template: '<h1>Hello Angular</h1><courses></courses>',
directives: [CoursesComponent]
})
export class AppComponent { 

}

https://github.com/angular/angular/issues/7526