Error: No Directive annotation found on AppComponent

[SamVerschueren]

Hi everyone

I was doing the first step in the getting started guide. When using es5, the example works but when using TypeScript, not so much.

First of all, I think the documentation forgot to include the traceurRuntime script.

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>

But when everything is included correctly, it gives me the following erro

Error during instantiation of Token(AppComponentAnnotatedType)!. ORIGINAL ERROR: Error: No Directive annotation found on AppComponent

This is a little piece of the main.js file transpiled from the main.ts file.

var AppComponent = (function () {
    function AppComponent() {
    }
    AppComponent = __decorate([
        angular2_1.Component({
            selector: 'my-app'
        }),
        angular2_1.View({
            template: '<h1>My first Angular 2 App</h1>'
        })
    ], AppComponent);
    return AppComponent;
})();

If I remove the __decorate and use it like the es5 example like the this, then it works.

var AppComponent = (function () {
    function AppComponent() {
    }
    AppComponent.annotations = [
        new angular2_1.Component({
            selector: 'my-app'
        }),
        new angular2_1.View({
            template: '<h1>My first Angular 2 App</h1>'
        })
    ];
    return AppComponent;
})();

So this might be a bug in the __decorate function.

[rkirov]

Can you link to the page that has the step that you are following?

The instructions here: https://angular.io/docs/js/latest/quickstart.html should support TS, but note they need a pre-release bundle included in a github repo.

The rest of the dev guides needs slight modification to be used with TS 1.5.0-beta.

The errors that you are reporting look like Component and View are the annotations, not decorators, thus unsuitable to be used with TS and @ syntax. If you are using 'alpha-20' there are no decorators in that bundle. Decorators will be available in the next alpha-21 release.

[SamVerschueren]

This is the page I was referring to. https://angular.io/docs/js/latest/guide/setup.html

I compared that code with the getting started guide you refered to and that's when I saw the traceur script was missing in the TS example. But that was not the main issue here :).

I installed typescript@1.5.0-beta with npm and used the tsc command line tool to transpile from TS to es5.

[rkirov]

I see, that explains it - <script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script> does not have decorators. Stay tuned for alpha-21 to be released in a day or so.

[SamVerschueren]

Oh oke, thanks for pointing that out :)!

[johnjelinek]

I'm getting this error on alpha.22. I don't get this error with alpha.20.

[johnjelinek]

Nevermind, I had to change my imports: import { ComponentAnnotation as Component, ViewAnnotation as View } from "angular2/angular2";

[SamVerschueren]

This works on 22.

[bwiklund]

I'm getting this error on 22

[SamVerschueren]

Can you copy paste what you have @bwiklund?

[bwiklund]

I've only started with typescript for the angular2 preview, so I fully expect that I'm doing something foolish. I had the annotations out of order before, but now I have a new error, TypeError: Cannot read property 'toString' of undefined

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, For, bootstrap} from "angular2/angular2";

@Component({
  selector: 'my-app',
  injectables: [FooService]
})

@View({
  template: `
    <h1>Sup {{ name }}</h1>
    <div *for="#item of list">{{ item }}</div>
  `,
  directives: [For]
})

class MyAppComponent {
  name: string;

  list: [string];

  constructor(fooService: FooService) {
    this.name = 'Ben';
    this.list = fooService.list;
  }
}

class FooService {
  list: [string];

  constructor() {
    this.list = ["Foo", "Bar", "Baz"];
  }
}

bootstrap(MyAppComponent);

[plumpNation]

I have the same issue as @bwiklund and co, and like them, I'm just trying to inject a simple class. I'm using

https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js https://jspm.io/system@0.16.js

and it didn't work without traceur-runtime

$traceurRuntime is not defined

, which was also missing from the tutorial, so I bower installed it at version 0.0.89.

The 'toString' of undefined error stops when not putting FooService in the injectables (and tidying up related code).

[SamVerschueren]

It doesn't look like the injectables property is implemented in the latest version of the Component annotation. Maybe @rkirov knows more about this?

[khyamay]

having the same issue, any workaround for this?

[SamVerschueren]

@khyamay Having issues with the error No Directive annotation found on AppComponent or with the injectables?

[khyamay]

@SamVerschueren yeah i had No Directive annotation found on AppComponent then i used alpha.22 and changed my imports import { ComponentAnnotation as Component, ViewAnnotation as View } from "angular2/angular2"; and now i get Uncaught TypeError: decorator is not a function

[SamVerschueren]

Yes that problem should be solved with version 22.

This is what my imports look like.

import {Component, View, bootstrap} from "angular2/angular2";

You can try using version 25? https://code.angularjs.org/2.0.0-alpha.25/angular2.js

[khyamay]

just tried with version 25 and if i changed the import to import {Component, View} from "angular2/angular2"; I get Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: Cannot resolve all parameters for DisplayComponent. Make sure they all have valid type or annotations. btw I am following step by step guide and every thing was working until I tried to create another class and inject it into the controller, so I guess it might be issue with injectables like u said

[SamVerschueren]

Yes, the injectables do not work yet (I guess). I tried to take a deeper look but couldn't find it in the code.

[vicb]

injectables is now appInjector. Sorry for the confusion (the CHANGELOG does not reflect this). We'll try to improve over time.

[SamVerschueren]

@vicb Thanks for clearing that out.

I've got the injection working but you can't put the FooService class in the main.ts file. It will throw an error indicating that it can't find FooService.

This however, does not show the list in the view. I can't declare the directives: [For] in the @View() annotation because it throws the error Unexpected directive value 'undefined' on the View of component 'AppComponent'.

FooService.ts

class FooService {
  list: string[];

  constructor() {
    this.list = ["Foo", "Bar", "Baz"];
  }
}

main.ts

/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="FooService.ts" />

import {Component, View, For, bootstrap} from "angular2/angular2";

@Component({
  selector: 'my-app',
  appInjector: [FooService]
})
@View({
  template: `
    <h1>Sup {{ name }}</h1>
    <div *for="#item of list">{{ item }}</div>
  `
})
class AppComponent {

  name: string;
  list: string[];

  constructor(fooService: FooService) {
    this.name = 'Ben';
    this.list = fooService.list;
  }
}

bootstrap(AppComponent);

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.25/angular2.dev.js"></script>
  </head>
  <body>
    <my-app></my-app>
    <script>
      System.import('FooService');
      System.import('main');
    </script>
  </body>
</html>

[SamVerschueren]

I found the issue regarding the directives. The documentation refers to the For, If and Switch directives, but when I dived into the code, I found it these directives actually are NgFor, NgIf and NgSwitch. Not sure why, probably for backward compatibility with angular 1.4?

When keeping that in mind, and using this code as the main.ts file

import {Component, View, NgFor, bootstrap} from "angular2/angular2";

@Component({
  selector: 'my-app',
  appInjector: [FooService]
})
@View({
  template: `
    <h1>Sup {{ name }}</h1>
    <div *ng-for="#item of list">{{ item }}</div>
  `,
  directives: [NgFor]
})
class AppComponent {

  name: string;
  list: string[];

  constructor(fooService: FooService) {
    this.name = 'Ben';
    this.list = fooService.list;
  }
}

bootstrap(AppComponent);

Everything should work like a charm.

Note: Do not use the angular2.d.ts type definition because it will not compile. The type definition uses For, If and Switch as well.

[khyamay]

@SamVerschueren yeah i just tried the way u said and its working fine, but i tried without making FooService in separate file like

import {Component, View, NgFor, bootstrap} from "angular2/angular2";

@Component({
  selector: 'my-app',
  appInjector: [FooService]
})
@View({
  template: `
    <h1>Sup {{ name }}</h1>
    <div *ng-for="#item of list">{{ item }}</div>
  `,
  directives: [NgFor]
})
class AppComponent {

  name: string;
  list: string[];

  constructor(fooService: FooService) {
    this.name = 'Ben';
    this.list = fooService.list;
  }
}

class FooService {
  list:  string[];

  constructor() {
    this.list = ["Foo", "Bar", "Baz"];
  }
}

bootstrap(AppComponent);

and i get Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: Cannot resolve all parameters for AppComponent. Make sure they all have valid type or annotations. error. Any reason for that??

[SamVerschueren]

That indeed will not work. The reason for this is because the way the tsc transpiler transpiles the .ts source to .js source code.

This is the output for your piece of code

if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
if (typeof __metadata !== "function") __metadata = function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var angular2_1 = require("angular2/angular2");
var AppComponent = (function () {
    function AppComponent(fooService) {
        this.name = 'Ben';
        this.list = fooService.list;
    }
    AppComponent = __decorate([
        angular2_1.Component({
            selector: 'my-app',
            appInjector: [FooService]
        }),
        angular2_1.View({
            template: "\n    <h1>Sup {{ name }}</h1>\n    <div *ng-for=\"#item of list\">{{ item }}</div>\n  ",
            directives: [angular2_1.NgFor]
        }), 
        __metadata('design:paramtypes', [FooService])
    ], AppComponent);
    return AppComponent;
})();
var FooService = (function () {
    function FooService() {
        this.list = ["Foo", "Bar", "Baz"];
    }
    return FooService;
})();
angular2_1.bootstrap(AppComponent);

As you see, the FooService variable is declared after AppComponent and thus is unknown when it is injected in the constructor.

If you change the output to the following

if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
if (typeof __metadata !== "function") __metadata = function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var angular2_1 = require("angular2/angular2");
var FooService = (function () {
    function FooService() {
        this.list = ["Foo", "Bar", "Baz"];
    }
    return FooService;
})();
var AppComponent = (function () {
    function AppComponent(fooService) {
        this.name = 'Ben';
        this.list = fooService.list;
    }
    AppComponent = __decorate([
        angular2_1.Component({
            selector: 'my-app',
            appInjector: [FooService]
        }),
        angular2_1.View({
            template: "\n    <h1>Sup {{ name }}</h1>\n    <div *ng-for=\"#item of list\">{{ item }}</div>\n  ",
            directives: [angular2_1.NgFor]
        }), 
        __metadata('design:paramtypes', [FooService])
    ], AppComponent);
    return AppComponent;
})();
angular2_1.bootstrap(AppComponent);

It will work because now FooService is known when injected in AppComponent. I tried to declare FooService before AppComponent a couple of weeks ago and then it gave me an error. When I try do to it now, it transpiles correctly. So try to do it like this.

import {Component, View, NgFor, bootstrap} from "angular2/angular2";

class FooService {
  list:  string[];

  constructor() {
    this.list = ["Foo", "Bar", "Baz"];
  }
}

@Component({
  selector: 'my-app',
  appInjector: [FooService]
})
@View({
  template: `
    <h1>Sup {{ name }}</h1>
    <div *ng-for="#item of list">{{ item }}</div>
  `,
  directives: [NgFor]
})
class AppComponent {

  name: string;
  list: string[];

  constructor(fooService: FooService) {
    this.name = 'Ben';
    this.list = fooService.list;
  }
}

bootstrap(AppComponent);

[khyamay]

awesome thanks for the clarifying it.. :)

[vicb]

• we have introduced forwardRef to reference classes which are not yet declared at the time they are referenced, grep the source code / tests to know more,
• see https://github.com/angular/angular/issues/1598 about the why of the ng- prefix

[khyamay]

@vicb thanks :+1:

[SamVerschueren]

I guess I can close this issue now everything is resolved.

[plumpNation]

Thanks to all who contributed to clearing this up.

[hoyangtsai]

@SamVerschueren thanks. It works.

[kemins]

Guys, i guess you have to update: https://angular.io/docs/js/latest/guide/displaying-data.html as it's not working example with injections, that just simply irritates...

[SamVerschueren]

I added a PR to the documentation website to update those examples. The property injectables is not correct anymore and should be appInjector as you can see a couple posts above this one.

[khyamay]

I think I read some where in the issues that appInjector is being renamed as well

[SamVerschueren]

@khyamay Can you post a link to the discussion if you know where to find it? Can be helpfull if people read this discussion later on.

[khyamay]

https://github.com/angular/angular/issues/2379 see this one

[SamVerschueren]

Thanks for posting this. It will become hostInjectables in the future.

[khyamay]

:+1:

[kemins]

i use 'appInjector' property and i put service in the same file, before component itself, but still getting exception.

Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: Cannot resolve all parameters for MyFriendsComponent. Make sure they all have valid type or annotations.

Error at InstantiationError.BaseException (https://code.angularjs.org/2.0.0-alpha.25/angular2.dev.js:7159:25)

[SamVerschueren]

If you take another look at my code example, you should use NgFor, NgIf instead of For and If. I added a PR to update the docs with these changes but not accepted so far.

[kemins]

in my case problem was with missed --emitDecoratorMetadata compiler option.

so this is the ts compile options in webstorm that make it works for me: --target es5 --module commonjs --emitDecoratorMetadata

[shakirmengrani]

After doing all things it's threw a typeError over annotations

[SamVerschueren]

Using the latest version? Using the correct typescript transpiler (1.5.0)?

[shakirmengrani]

i have typescript 1.5.0 - beta version and run a following command. tsc app.ts --module commonjs --target es5 --emitDecoration but it's threm typeError

[truthtai]

run with tsc.cmd --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts. it's worked for me.

[kiranintouch]

@SamVerschueren : Thank you for the solution @vicb : I am trying to find the usage of forwardRef. I tried searching the code repository but was not able to find it. Request to provide its usage.

[felipeands]

I fix it on my page just removing the ";" at the end of @Page({})

[oodboo]

angular2@2.0.0-beta.17, I am experiencing this issue if multiple classes are included. If I import TodoItem from the separate file (uncomment line 2 and comment TodoItem class) everything will work fine.

But if I comment that line and if use class inside, it will show the message "No Directive annotation found on AppComponent "

I also tried to export both classes with the export { AppComponent, TodoItem } but that did not worked either ...

import {Component} from 'angular2/core';
//import {TodoItem} from './TodoItem';

@Component({
    selector: 'my-app',
    template: '<h1> Hello {{name}} </h1>'
})

class TodoItem {
    public name: string;

    constructor() {
        this.name = 'Foo';
    }
}

export class AppComponent {
    public name: string;

    constructor() {
        this.name = 'Bar';
    }
}

What am I missing here ?

[SamVerschueren]

@Component is not a global thing per file, it's a decorator that adds extra behaviour to a class. Yours is just floating without having a target.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1> Hello {{name}} </h1>'
})
export class AppComponent {
    public name: string;

    constructor() {
        this.name = 'Bar';
    }
}

[oodboo]

Thank you, this is a beginner mistake ...

[mchamo]

I am seeing same issue, using Angular2 RC4.with the webpack implementation, here is the url to the documentation: https://angular.io/docs/ts/latest/guide/webpack.html

Note, I have a component that is defined as follows:

import { Component } from '@angular/core';

@Component({ moduleId: module.id, selector: 'test1', template: require('./test1.component.html') }) export class Test1 { public message: string = "hello from test1 component inside of App-shell"; }

In the angular app that houses the above component, I am able to import the component, add it to the list of directives, and use its selector in my HTML just fine.

However, I am trying to also share this same component with another Angular 2 app. In the second app, when I try to use the component from the first app above, I reference the compiled js files as follows:

var test = require('../../../framework/src/app/test1/test1.component');

Note, after the above line, test does have a reference to the component correctly, and I can see the message property correctly in the console window in chrome dev tools (see below).

test.Test1 Test1() { this.message = "hello from test1 component inside of App-shell"; }

However, when I try to add test.Test1 to the list of directives and then use the selector in the HTML of this the second app, I see the following error in the console window:

Uncaught No Directive annotation found on Test1

Note, I did the same exact setup just fine, without using webpack, and by following the SystemJS approach. I was able to share the first component from the first angular app with the second angular app using the identical approach mentioned above. However, when I tried to leverage webpack to bundle the code, I ran into the above issue.

FYI, I am working on a portal like app that to the user will look and feel like one application, however, it needs to be split into smaller angular2 applications, so that each team can release its area/app without having to deploy the entire portal app. However, certain components may be shared across apps. Hopefully, that makes sense?

Thanks in advance for any input!

[sky-coding]

@mchamo I am in an identical situation. I have an app, Common, with a sample component. Here it is sent through tsc:

// sample.component.js
"use strict";
var core_1 = require('@angular/core');
var SampleComponent = (function () {
    function SampleComponent() {
    }
    SampleComponent = __decorate([
        core_1.Component({
            selector: 'sample-component',
            template: "\n    Sample component\n  "
        }), 
        __metadata('design:paramtypes', [])
    ], SampleComponent);
    return SampleComponent;
}());
exports.SampleComponent = SampleComponent;
//# sourceMappingURL=sample.component.js.map

// sample.component.d.ts
export declare class SampleComponent {
    constructor();
}

Using this component from within Common (using webpack instead of raw tsc) via import {SampleComponent} from '../src/components/' results in a working component. Here is what webpack compiles it into:

"use strict";
var core_1 = __webpack_require__(1), SampleComponent = function() {
    function SampleComponent() {}
    return SampleComponent = __decorate([ core_1.Component({
        selector: "sample-component",
        template: "\n    Sample component\n  "
    }), __metadata("design:paramtypes", []) ], SampleComponent);
}();
exports.SampleComponent = SampleComponent;

Now, I have a second application that is consuming Common through npm link, and it throws No Directive annotation found on SampleComponent . This consuming application is using an identical webpack config to Common's local app. The only difference is that tsc is processing my initial typescript files in the failing scenario. I'm trying to narrow down the problem from here, I thought it would have to be an issue with the typescript compiler settings, but the output from the working and nonworking build are nearly identical.