Angular2 - angular2.dev.js：23501例外：ArticleComponentで指示の注釈が見つかりません

Question

私はng-book2に従い、簡単なredditクローンアプリケーションを作成しています。これまで私が持っていたのは、index.htmlファイルとapp.tsファイルです。

私のapp.tsファイルには、2つのコンポーネントが宣言されています。 2番目のコンポーネント - redditは、最初のコンポーネント - reddit-articleとArticleクラスをロードすることになっています。

angular2.dev.js:23501 EXCEPTION: No Directive annotation found on ArticleComponentBrowserDomAdapter.logError @ angular2.dev.js:23501BrowserDomAdapter.logGroup @ angular2.dev.js:23512ExceptionHandler.call @ angular2.dev.js:1185(anonymous function) @ angular2.dev.js:12489NgZone._notifyOnError @ angular2.dev.js:13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13437Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13456zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13488Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13456zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262 angular2.dev.js:23501 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23501ExceptionHandler.call @ angular2.dev.js:1187(anonymous function) @ angular2.dev.js:12489NgZone._notifyOnError @ angular2.dev.js:13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13437Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13456zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13488Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13456zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262 angular2.dev.js:23501 Error: No Directive annotation found on ArticleComponent at new BaseException (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:7385:21) at DirectiveResolver.resolve (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:6688:13) at RuntimeMetadataResolver.getDirectiveMetadata (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:22724:47) at http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:22792:22 at Array.map (native) at Array.map (http://localhost:8080/node_modules/es6-shim/es6-shim.js:1101:14) at RuntimeMetadataResolver.getViewDirectivesMetadata (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:22791:25) at TemplateCompiler._compileNestedComponentRuntime (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24763:63) at http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24748:26 at Array.forEach (native)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:2244:29) at Zone.fork (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:2293:47) at Zone.bind (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:1218:53) at bindArguments (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:1401:36) at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:1413:46) at TemplateCompiler._compileComponentRuntime (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24741:14) at TemplateCompiler.compileHostComponentRuntime (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24693:14) at RuntimeCompiler_.compileInHost (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:25044:37) at DynamicComponentLoader_.loadAsRoot (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12253:29) at di_1.provide.useFactory (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12351:39)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:2244:29) at Zone.fork (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:2293:47) at NgZone._createInnerZone (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:13444:39) at new NgZone (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:13310:32) at createNgZone (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12373:12) at PlatformRef_.application (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12448:31) at Object.bootstrap (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:25239:64) at execute (http://localhost:8080/app.js:76:23) at ensureEvaluated (http://localhost:8080/node_modules/systemjs/dist/system.src.js:2981:26) at Object.execute (http://localhost:8080/node_modules/systemjs/dist/system.src.js:3099:13)

のindex.html：

<!doctype html> 
<html> 
    <head> 
    <title>Angular 2 - Simple Reddit</title> 
    <link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" /> 
    <link rel="icon" href="resources/images/favicon.ico" /> 
    <!-- Libraries --> 
    <script src="node_modules/es6-shim/es6-shim.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

    <!-- Stylesheet --> 
    <link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    </head> 
    <body> 

    <!-- Configure System.js, our module loader --> 
    <script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app.js') 
      .then(null, console.error.bind(console)); 
    </script> 

    <!-- Menu Bar --> 
    <div class="ui menu"> 
     <div class="ui container"> 
     <a href="#" class="header item"> 
      <img class="logo" src="resources/images/ng-book-2-minibook.png"> 
      ng-book 2 
     </a> 
     <div class="header item borderless"> 
      <h1 class="ui header"> 
      Angular 2 Simple Reddit 
      </h1> 
     </div> 
     </div> 
    </div> 

    <div class="ui main text container"> 
     <reddit>Loading...</reddit> <!-- <--- Our app loads here! --> 
    </div> 

    </body> 
</html> 

app.ts：

import { bootstrap } from 'angular2/platform/browser'; 
import { Component } from 'angular2/core'; 

@Component({ 
    selector: 'reddit-article', 
    host: { 
    class: 'row' 
    }, 
    template: ` 
<div class="four wide column center aligned votes"> <div class="ui statistic"> 
<div class="value"> {{ article.votes }} 
</div> 
<div class="label"> 
Points 
     </div> 
     </div> 
</div> 
<div class="twelve wide column"> 
<a class="ui large header" href="{{ article.link }}"> {{ article.title }} 
</a> 
<ul class="ui big horizontal list voters"> 
<li class="item"> 
<a href (click)="voteUp()"> 
<i class="arrow up icon"></i> upvote 
</a> </li> 
<li class="item"> 
<a href (click)="voteDown()"> 
<i class="arrow down icon"></i> 
downvote 
</a> </li> 
</ul> </div> 
` 
}) 

class Article { 
    title: string; 
    link: string; 
    votes: number; 

    constructor(title: string, link: string, votes?: number) { 
    this.title = title; 
    this.link = link; 
    this.votes = votes || 0; 
    } 

    voteUp(): void { 
    this.votes += 1; 
    } 

    voteDown(): void { 
    this.votes -= 1; 
    } 
} 

class ArticleComponent { 
    article: Article; 

    constructor() { 
    this.article = new Article('Angular 2', 'http://angular.io', 10); 
    } 

    voteUp(): boolean { 
    this.article.voteUp(); 
    return false; 
    } 

    voteDown(): boolean { 
    this.article.voteDown(); 
    return false; 
    } 
} 

@Component({ 
    selector: 'reddit', 
    directives: [ArticleComponent], 
    template: ` 
    <form class="ui large form segment"> 
     <h3 class="ui header">Add a Link</h3> 
<div class="field"> 
<label for="title">Title:</label> <input name="title" #newtitle> 
     </div> 
     <div class="field"> 
     <label for="link">Link:</label> 
     <input name="link" #newlink> 
</div> 
     <button (click)="addArticle(newtitle, newlink)" 
       class="ui positive right floated button"> 
     Submit link 
     </button> 
</form> 
<div class="ui grid posts"> 
    <reddit-article> 
    </reddit-article> 
</div>` 
}) 

class RedditApp { 
    constructor() { 
    } 
    addArticle(title: HTMLInputElement, link: HTMLInputElement): void { 
    console.log(`Adding article title: ${title.value} and link: ${link.value}`); 
    } 
} 

bootstrap(RedditApp); 

Answer 1

あなたは間違ったクラスに@Componentを定義：Article今すぐサーバーを実行している時に、私は次のエラーを取得しますArticleComponentの代わりにRedditAppクラスのdirectives属性内にArticleComponentクラスを設定します。

あなたはこれをこのように変更することができます：

class Article { 
    (...) 
} 

@Component({ 
    (...) 
}) 
class ArticleComponent { 
    (...) 
} 

@Component({ 
    (...) 
}) 
class RedditApp { 
    (...) 
} 

Answer 2

あなたはRedditAppのdirectivesにArticleComponentをリストが、ArticleComponentディレクティブではありません。 @Directive(...)または@Component(...)デコレータはありません。