Angular2-angular2.dev.js：23501例外：在ArticleComponent上找不到指令注釋

Question

我正在按照ng-book2編寫一個簡單的reddit克隆應用程序。 到目前為止，我所擁有的只是一個index.html文件和一個app.ts文件。

現在在我的app.ts文件中，聲明2個組件。 第二個組件reddit應該加載第一個組件reddit-article和Article類。 現在，在運行服務器時，出現以下錯誤：

angular2.dev.js：23501例外：在ArticleComponentBrowserDomAdapter.logError @ angular2.dev.js：23501BrowserDomAdapter.logGroup@angular2.dev.js：23512ExceptionHandler.call@angular2.dev.js：1185（匿名函數）上找不到指令注釋angular2.dev.js：12489NgZone._notifyOnError @ angular2.dev.js：13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13437Zone.run @ angular2-polyfills.js：1247（匿名函數）@ 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 $承諾$ $內部$ $發布@ angular2-polyfills.js：451（匿名函數）@ angular2-polyfills.js：123microtask @ angular2.dev.js：13488Zone.run @ angular2-polyfills.js：1243（匿名函數）@ angular2.dev.js：13456zoneBoundFn @ angular2-polyfills.js：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：262 angular2.dev.js：23501 STACKTRACE：BrowserDomAd apter.logError @ angular2.dev.js：23501ExceptionHandler.call @ angular2.dev.js：1187（匿名函數）@ angular2.dev.js：12489NgZone._notifyOnError @ angular2.dev.js：13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13437Zone.run @ angular2-polyfills.js：1247（匿名函數）@ 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（匿名函數）@ angular2-polyfills。 js：123microtask @ angular2.dev.js：13488Zone.run @ angular2-polyfills.js：1243（匿名函數）@ angular2.dev.js：13456zoneBoundFn @ angular2-polyfills.js：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：262 angular2.dev.js：23501錯誤：在新BaseException的ArticleComponent上找不到指令注釋（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：7385：21 ）直接 iveResolver.resolve（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：6688：13 ）在RuntimeMetadataResolver.getDirectiveMetadata（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev .js：22724：47 ）位於http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：22792：22位於Array.map（本地）在Array.map（ http：// localhost：8080 /node_modules/es6-shim/es6-shim.js:1101:14 ），位於RuntimeMetadataResolver.getViewDirectivesMetadata（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：22791：25 ），位於TemplateCompiler._compileNestedComponentRuntime （ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：24763：63 ）在http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：24748：26在Array.forEach（本機）

-----異步間隙-----錯誤在_getStacktraceWithUncaughtError（ HTTP：// 29本地主機：8080 / node_modules / angular2 /捆綁/ angular2-polyfills.js：2244在Zone.fork（） 的http：//本地主機：8080 / node_modules / angular2 / bundles / angular2-polyfills.js：2293：47 ）在Zone.bind（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2-polyfills.js：1218：53 ）在bindArguments （ http：// localhost：8080 / node_modules / angular2 / bundles / angular2-polyfills.js：1401：36 ）at lib $ es6 $ promise $ promise $$ Promise.obj。（匿名函數）[當時]（ http： //位於TemplateCompiler._compileComponentRuntime（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：24741：14的 //localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:1413:46 ） ），位於RuntimeCompiler_.compileInHost（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2 ）的TemplateCompiler.compileHostComponentRuntime（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：24693：14 ）處.dev.js：25044：37 ）在DynamicComponentLoader _.loadAsRoot（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：12253：29 ）位於di_1.provide.useFactory（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2 .dev.js：12351：39 ）

-----異步間隙-----錯誤在_getStacktraceWithUncaughtError（ HTTP：// 29本地主機：8080 / node_modules / angular2 /捆綁/ angular2-polyfills.js：2244在Zone.fork（） 的http：//本地主機：8080 / node_modules / angular2 / bundles / angular2-polyfills.js：2293：47 ）在NgZone._createInnerZone（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：13444：39 ）在新NgZone（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：13310：32 ）在createNgZone（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：12373 ：12 ）在PlatformRef_.application（ http：// localhost：8080 / node_modules / angular2 / bundles / angular2.dev.js：12448：31 ）在Object.bootstrap（ http：// localhost：8080 / node_modules / angular2 / bundles /angular2.dev.js:25239:64 ）在執行時（ http：// localhost：8080 / app.js：76：23 ）在sureEvaluated（ http：// localhost：8080 / node_modules / systemjs / dist / system.src .js：2981：26 ）在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>

應用程式：

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上定義了@Component ： Article而不是ArticleComponent 。 您可以設置ArticleComponent的內類directives的屬性RedditApp類。

您可以這樣更改：

class Article {
  (...)
}

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

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

Answer 2

你列出ArticleComponent在directives的RedditApp但ArticleComponent不是指令。 它沒有@Directive(...)或@Component(...)裝飾器。