Geek Answers Handbook

Angular2 - getting an error like: `EXCEPTION: no annotation directive found on MyComponent`

when I try to import a directive from another file, I get an error like 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 get an error like: No Directive annotation found on MyComponent how to solve this?

+6
source share
4 answers

You must delete ; after closing the Component command.

 import {Component} from 'angular2/core'; @Component({ selector : 'my-component', template : `<h2>This is from My component</h2>` }) export class MyComponent { };
+29
source

Perhaps you need to make a relative path. It depends on where the component you want to import is located relative to the script into which you are importing the component. Sort of

import {MyComponent} from "../app.my-component"

or

import {MyComponent} from "./app.my-component" .

This will help if you place your folder structure.

0
source

oke, I also still "participate" in this, but I received the same message as you. I think I solved it ...

found my answer here: https://angular.io/docs/ts/latest/guide/attribute-directives.html

add this to your app.mycomponent.ts:

 import {Directive} from 'angular2/core';

and add the directive:

 @Directive({ selector: '[MyComponent]' })

Hope this helps you a bit.

Again, NOT sure if this is the right way ...

0
source

In my case, there was a problem with exporting a certain class and importing this class into other components.

But this error was not shown explicitly; instead, it appeared as an exception in EXCEPTION: No Directive annotation... in the console.

To explicitly get this error:

  • Stop local server
  • Re-run npm start (assuming Angular Quick Launch is installed)

Any current errors that were previously hidden will be displayed immediately.

0
source

More articles:


All Articles