0

I'm following ng-book2 in writing a simple reddit clone app. So far all I have is a index.html file and a single app.ts file.

Now in my app.ts file, I declare 2 components. The second component - reddit is supposed to load the first component - reddit-article and the Article class. Now upon running the server I get the following error:

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

2 Answers 2

2

You define the @Component on the wrong class: Article instead of ArticleComponent. You set the ArticleComponent class within the directives attribute of the RedditApp class.

You could change this this way:

class Article {
  (...)
}

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

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

You list ArticleComponent in directives of RedditApp but ArticleComponent isn't a directive. It doesn't have a @Directive(...) or @Component(...) decorator.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.