title: EXCEPTION: No Directive annotation found on ArticlesService
body: <p><a href="http://plnkr.co/edit/iFYtlbDte83umKgiUcTl?p=preview" rel="nofollow">This is a Planker</a></p>
  
  <p>i'm tring to get whole article text from json file by press a button "more".
  When i press "more" button i get an error "EXCEPTION: No Directive annotation found on ArticlesService".</p>
  
  <p>article.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {HTTP_PROVIDERS} from 'angular2/http';
  import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
  import { Router } from 'angular2/router';
  import {ArticlesService} from './article-service';
  import {ArticlesDetailComponent} from './article-detail';
  
  @Component({
   selector: 'articles',
   providers: [ArticlesService,HTTP_PROVIDERS],
   template: `
   &lt;md-content class="md-padding" layout="row" layout-wrap layout-align="center start"&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>  &lt;img src="{{article.article_img}}" class="md-card-image" alt="Grass"&gt;
    &lt;md-card-title&gt;
      &lt;md-card-title-text&gt;
        &lt;span class="md-headline"&gt;{{article.article_title}}&lt;/span&gt;
      &lt;/md-card-title-text&gt;
    &lt;/md-card-title&gt;
    &lt;md-card-content&gt;
    {{article.article_content}}
    &lt;/md-card-content&gt;
    &lt;md-card-actions layout="row" layout-align="end center"&gt;
      &lt;button md-button (click)="gotoDetail()"&gt;More&lt;/button&gt;
    &lt;/md-card-actions&gt;
  &lt;/md-card&gt;
  &lt;/div&gt;
  &lt;/md-content&gt;`,
   directives: [MATERIAL_DIRECTIVES,ArticlesDetailComponent]
  })
    export class ArticlesComponent {
  
    constructor(private _articles:ArticlesService,private _router:Router) {}
  
  public articles;
  private errorMessage;
   ngOnInit() { this.getArticles();}
  
    getArticles() {
    this._articles.getArticles()
    .subscribe(articles =&gt;
    this.articles = articles,
    error =&gt;  this.errorMessage = &lt;any&gt;error);
    }
   gotoDetail() {
     this._router.navigate(['ArticlesDetail', { id: this.articles.id }]);
   }
  }
  </code></pre>
  
  <p>and articles-detail.ts</p>
  
  <pre><code>import {Component,OnInit} from 'angular2/core';
  import {HTTP_PROVIDERS} from 'angular2/http';
  import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
  import {ArticlesService} from './article-service';
  import { RouteParams } from 'angular2/router';
  
  
    @Component({
    selector: 'articles-detail',
    providers: [ArticlesService,HTTP_PROVIDERS],
    template: `
       &lt;p&gt;Detail&lt;/p&gt;
                  `,
     directives: [MATERIAL_DIRECTIVES,ArticlesService]
        })
    export class ArticlesDetailComponent implements OnInit {
  
       constructor(private _articles:ArticlesService,private _routeParams:                RouteParams) {}
  
   public article;
  
    ngOnInit() {this.getArticle();}
  
  
    getArticle() {
  let id = +this._routeParams.get('id');
    console.log(id);
      this._articles.getArticle(id)
     .then(article =&gt; this.article = article);
       }
  
   goBack() {
  window.history.back();
     }
  } 
  </code></pre>