-
Notifications
You must be signed in to change notification settings - Fork 24.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error: No Directive annotation found on AppComponent #1655
Comments
Can you link to the page that has the step that you are following? The instructions here: 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 |
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 |
I see, that explains it - |
Oh oke, thanks for pointing that out :)! |
I'm getting this error on |
Nevermind, I had to change my imports: |
This works on 22. |
I'm getting this error on 22 |
Can you copy paste what you have @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,
|
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 and it didn't work without traceur-runtime
, which was also missing from the tutorial, so I The |
It doesn't look like the |
having the same issue, any workaround for this? |
@khyamay Having issues with the error |
@SamVerschueren yeah i had |
Yes that problem should be solved with version 22. This is what my imports look like.
You can try using version 25? https://code.angularjs.org/2.0.0-alpha.25/angular2.js |
just tried with version 25 and if i changed the import to |
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 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 FooService.tsclass 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> |
I found the issue regarding the directives. The documentation refers to the When keeping that in mind, and using this code as the 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 |
@SamVerschueren yeah i just tried the way u said and its working fine, but i tried without making FooService in separate file like
and i get |
That indeed will not work. The reason for this is because the way the 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 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 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); |
Guys, i guess you have to update: https://angular.io/docs/js/latest/guide/displaying-data.html |
I added a PR to the documentation website to update those examples. The property |
I think I read some where in the issues that |
@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. |
#2379 see this one |
Thanks for posting this. It will become |
👍 |
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 |
If you take another look at my code example, you should use |
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: |
After doing all things it's threw a typeError over annotations |
Using the latest version? Using the correct typescript transpiler (1.5.0)? |
i have typescript 1.5.0 - beta version and run a following command. |
run with tsc.cmd --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts. it's worked for me. |
@SamVerschueren : Thank you for the solution |
I fix it on my page just removing the ";" at the end of @page({}) |
angular2@2.0.0-beta.17, 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
What am I missing here ? |
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1> Hello {{name}} </h1>'
})
export class AppComponent {
public name: string;
constructor() {
this.name = 'Bar';
}
} |
Thank you, this is a beginner mistake ... |
I am seeing same issue, using Angular2 RC4.with the webpack implementation, here is the url to the documentation: Note, I have a component that is defined as follows: import { Component } from '@angular/core'; @component({ 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 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! |
@mchamo I am in an identical situation. I have an app, // 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 "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 |
@sky-coding Please refer to this thread that I started on the AngularJS Google group. https://groups.google.com/forum/#!topic/angular/KDuV6Qvke7Y In it I describe this issue further, and in my second post on the issue I think I have identified the cause. The core issue seems to be in the way webpack assigns unique ids to dependencies when generating a bundle or chunk. After thinking about this some more, I am not sure if this will be solve-able via webpack, because the first app and the second app, both have their own instance of a node_modules folder. Hence, when webpack bundles are generated for each app, each app's instances of the angular/core (or node dependencies) will be assigned a different unique id. As I described, when I manually changed the unique id in the second app's app.js bundle, it all worked fine. Obviously, change it manually isn't a viable solution. For now, I have worked around this issue by generating the bundle via SystemJS Builder instead of webpack. I used the below approach with some modifications specific to my project to get it to work. |
@mchamo, thanks for looking into it. I tested and experienced the same error using just I have a pretty crisp example of the problem here: https://github.com/sky-coding/angular-2-webpack-library, I've been trying all sorts of things, but if you come up with any ideas please reach out! |
Hi, I am trying to use angular2.0.0.-rc6 with es6 and systemjs. This is my component
and then trying to downgrade the component to be used in an angular 1 app.
And I am getting:
Could it be a bug in the new rc6? or is just I am missing something? Thanks. |
@ignaciodm This issue is closed. For support questions please use CONTRIBUTING - Got a Question or Problem? |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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.
But when everything is included correctly, it gives me the following erro
This is a little piece of the
main.js
file transpiled from themain.ts
file.If I remove the __decorate and use it like the es5 example like the this, then it works.
So this might be a bug in the
__decorate
function.The text was updated successfully, but these errors were encountered: