angular: Error: No Directive annotation found on AppComponent

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.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 55 (25 by maintainers)

Most upvoted comments

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 <test1></test1> 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!

mchamo on Aug 5, 2016

@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';
    }
}

SamVerschueren on Apr 29, 2016

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

felipeands on Mar 18, 2016