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

Posted 2023-02-22

【中文标题】Angular2 - angular2.dev.js:23501 例外：在 ArticleComponent 上找不到指令注释

【英文标题】：Angular2 - angular2.dev.js:23501 EXCEPTION: No Directive annotation found on ArticleComponent

【发布时间】：2016-09-05 08:45:12

【问题描述】：

我正在关注 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$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 STACKTRACE:BrowserDomAdapter.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 错误：无指令 在 ArticleComponent 上找到的注释 在新的 BaseException (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:7385:21) 在 DirectiveResolver.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://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:2244:29) 在 Zone.fork (http://localhost: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) 在 lib$es6$promise$promise$$Promise.obj.(匿名函数) [as then] (http://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:1413:46) 在 TemplateCompiler._compileComponentRuntime (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24741:14) 在 TemplateCompiler.compileHostComponentRuntime (http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24693:14) 在 RuntimeCompiler_.compileInHost (http://localhost:8080/node_modules/angular2/bundles/angular2.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://localhost:8080/node_modules/angular2/bundles/angular2-polyfills.js:2244:29) 在 Zone.fork (http://localhost: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) 在 ensureEvaluated (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>

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);

【参考方案1】：

您在错误的类上定义了@Component：Article 而不是ArticleComponent。您在RedditApp 类的directives 属性中设置ArticleComponent 类。

你可以这样改变：

class Article 
  (...)


@Component(
  (...)
)
class ArticleComponent 
  (...)


@Component(
  (...)
)
class RedditApp 
  (...)

【参考方案2】：

您在directives 的RedditApp 中列出ArticleComponent，但ArticleComponent 不是指令。它没有 @Directive(...) 或 @Component(...) 装饰器。