Angular2 - getting error as : `EXCEPTION: No Directive annotation found on MyComponent`

Question

when i trying to import a directive from other file, i am getting the error as EXCEPTION: No Directive annotation found on MyComponent - how to solve this?

here is my code:

app.component.ts:

import {Component} from 'angular2/core';
import {MyComponent} from "./app.my-component"

@Component({
    selector: 'app',
    template: `
        <h1>Hellow World</h1>
        <span>Here is your component:</span>
        <my-component></my-component>
    `,
    directives: [MyComponent]
})

export class AppComponent { }

app.mycomponent.ts:

import {Component} from 'angular2/core';

@Component({

    selector : 'my-component',

    template : `<h2>This is from My component</h2>`

});

export class MyComponent { };

But i am getting error as : No Directive annotation found on MyComponent how to solve this?

Solution

You should remove ; after component closing Component directive parenthesis.

import {Component} from 'angular2/core';

@Component({

selector : 'my-component',

template : `<h2>This is from My component</h2>`

})
export class MyComponent { };

Comments

[3gwebtrain]

if i use import {MyComponent} from "../app.my-component"; then i am getting error as : systemjs throws error as : http://localhost:3001/app.my-component 404 (Not Found) in case if i use your second suggesion i am getting error as No Directive annotation found on MyComponent

[John]

Sorry I could not be of any help. Have look at the code from this blog post: blog.edenmsg.com/angular2-typescript-gulp-and-expressjs . Maybe you will find the source to your problems from it. I used that post as a reference when creating my first angular 2 application.

[Turdaliev Nursultan]

Is your file name 'app.mycomponent.ts' or 'app-mycomponent.ts'?

[3gwebtrain]

my file name is app.my-component.ts -

[micronyks]

now try with full static path and tell us for which path it works correctly?

[3gwebtrain]

@micronyks - here is my app dropbox.com/s/xdahp4e8g07dvaz/demo.zip?dl=0 download and have a look

[Turdaliev Nursultan]

@3gwebtrain, I have created a plunkr code, and it's working, a ";" was the problem, you can check by putting it and looking at console. plnkr.co/edit/GLdViZfwAoWRx99g6k7E?p=preview

[Turdaliev Nursultan]

Maybe, you did not transpile typescript into js?

[3gwebtrain]

i do. can you please download my file and see?

[Turdaliev Nursultan]

Yes I am looking at it, can you please look into plunker as well?

[Turdaliev Nursultan]

It's }); maan. You should set it to }). Remove ; It was on your code you provided. You didn't remove it as I said. It's on app.my-component.ts file.

[3gwebtrain]

yes. this is my bad. i have removed around other than the function. but it should not be the case to break the app. !

[Turdaliev Nursultan]

It is the case breaking the app, I checked

[3gwebtrain]

Let us continue this discussion in chat.

[watzon]

Thanks! I had this same problem and was trying to solve it for at least an hour!

[Sander]

euh, so after deleting this solution from my code, cause i was not happy with it as the 'end solution', i thought it would crash again... but it didnt... very very weird. Cache problem maybe?

[mautrok]

sorry but i have the same problem, anyone had found a solution? and most of all, isn't an error really strange and too much generic? is there a way to debug it? for example my problem is on @injectable() directive.