angular - Webpack Angular2 Typescript: EXCEPTION: No Directive annotation found on -

i try use webpack module development: use npm link command custom module in sample application.

but have error: error in console

if put component (.ts, .html) in app source, no error, works. mistake?

edit: have error components

spinner.component.ts:

import { component, input, ondestroy } '@angular/core';  @component({  selector: 'an-spinner',  styles: [     `     ... delete limit number of line codes     `,  ],  template: require( './spinner.component.html'), }) export class spinnercomponent implements ondestroy {  private currenttimeout: number = undefined;  private isdelayedrunning: boolean = false;   @input()  public delay: number = 300;   @input()  public set visible(value) {      if (! value) {         this.canceltimeout();         this.isdelayedrunning = false;      } else if (! this.currenttimeout) {         this.currenttimeout = settimeout(() => {             this.isdelayedrunning = value;             this.canceltimeout(); }, this.delay);      }  }   private canceltimeout(): void {      cleartimeout(this.currenttimeout);      this.currenttimeout = undefined;  }   ngondestroy(): {      this.canceltimeout();  } } 

spinner.component.html:

<div [hidden]="!isdelayedrunning" class="containerspin"> <div  class="spinner">     <div class="sk-fading-circle">         <div class="sk-circle1 sk-circle"></div>         <div class="sk-circle2 sk-circle"></div>         <div class="sk-circle3 sk-circle"></div>         <div class="sk-circle4 sk-circle"></div>         <div class="sk-circle5 sk-circle"></div>         <div class="sk-circle6 sk-circle"></div>         <div class="sk-circle7 sk-circle"></div>         <div class="sk-circle8 sk-circle"></div>         <div class="sk-circle9 sk-circle"></div>         <div class="sk-circle10 sk-circle"></div>         <div class="sk-circle11 sk-circle"></div>         <div class="sk-circle12 sk-circle"></div>     </div> </div>