title: Angular2. Exception: No Directive annotation found on Alert
body: <p>I am getting the following exception in my browser logs:</p>
  
  <blockquote>
    <p>No Directive annotation found on Alert</p>
  </blockquote>
  
  <p>Stacktrace:</p>
  
  <pre><code>Error: No Directive annotation found on Alert
  at new BaseException (webpack:///./~/angular2/src/facade/exceptions.js?:15:23)
  at DirectiveResolver.resolve (webpack:///./~/angular2/src/core/linker/directive_resolver.js?:41:15)
  at RuntimeMetadataResolver.getDirectiveMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:41:51)
  at eval (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:62)
  at Array.map (native)
  at Array.map (webpack:///./~/es6-shim/es6-shim.js?:1113:14)
  at RuntimeMetadataResolver.getViewDirectivesMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:27)
  at TemplateCompiler._compileNestedComponentRuntime (webpack:///./~/angular2/src/compiler/template_compiler.js?:151:65)
  at eval (webpack:///./~/angular2/src/compiler/template_compiler.js?:136:87)
  at Array.forEach (native)
  at Array.forEach (webpack:///./~/es6-shim/es6-shim.js?:1107:14)
  at eval (webpack:///./~/angular2/src/compiler/template_compiler.js?:136:43)
  at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24)
  at Zone.eval [as run] (webpack:///./~/angular2/src/core/zone/ng_zone.js?:344:42)
  at zoneBoundFn (webpack:///./~/zone.js/dist/zone-microtask.js?:1193:26)
  at lib$es6$promise$$internal$$tryCatch (webpack:///./~/zone.js/dist/zone-microtask.js?:441:17)
  at lib$es6$promise$$internal$$invokeCallback (webpack:///./~/zone.js/dist/zone-microtask.js?:453:18)
  at lib$es6$promise$$internal$$publish (webpack:///./~/zone.js/dist/zone-microtask.js?:424:12)
  at eval (webpack:///./~/zone.js/dist/zone-microtask.js?:96:10)
  at microtask (webpack:///./~/angular2/src/core/zone/ng_zone.js?:384:29)
  at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24)
  at Zone.eval [as run] (webpack:///./~/angular2/src/core/zone/ng_zone.js?:344:42)
  at zoneBoundFn (webpack:///./~/zone.js/dist/zone-microtask.js?:1193:26)
  at MutationObserver.lib$es6$promise$asap$$flush (webpack:///./~/zone.js/dist/zone-microtask.js?:235:10)
  </code></pre>
  
  <p>How to fix it?</p>
  
  <hr>
  
  <p>Core libraries: </p>
  
  <ul>
  <li>Angular 2</li>
  <li><a href="https://github.com/valor-software/ng2-bootstrap" rel="nofollow">Angular 2 bootstrap</a></li>
  </ul>
  
  <p>Build system:</p>
  
  <ul>
  <li><a href="https://github.com/AngularClass/angular2-webpack-starter" rel="nofollow">Webpack</a></li>
  </ul>
  
  <hr>
  
  <h2>Here is my source code:</h2>
  
  <p><strong>Angular 2 bootstrap <a href="https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert/alert.component.ts" rel="nofollow">'alert.component.ts'</a></strong> </p>
  
  <blockquote>
    <p>This part of code belongs to <strong>ng2-bootstrap</strong> framework.</p>
  </blockquote>
  
  <pre><code>@Component({
    selector: 'alert',
    directives: [NgIf, NgClass],
    template: ALERT_TEMPLATE
  })
  export class Alert {
    ......
  }
  </code></pre>
  
  <p><strong>My project App component</strong></p>
  
  <pre><code>.... Other imports ....
  import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
  
  @Component({
      selector: 'app',
      providers: [],
      directives: [Alert],    // &lt;----- THE PROBLEM IS HERE
      pipes: [],
      styles: [require('./app.component.scss')],
      template: require('./app.component.html')
  })
  @RouteConfig([
      {path: '/', name: 'Index'}
  ])
  export class App extends Type {
      title: string = 'Hello';
  
      constructor() {
          super();
      }
  
  }
  </code></pre>
  
  <p><strong>Bootstrap script</strong></p>
  
  <blockquote>
    <p>Full source code of bootstrap script is <a href="https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/main.ts" rel="nofollow">here</a></p>
  </blockquote>
  
  <pre><code>export function main() {
      return browser.bootstrap(App)
          .catch(err =&gt; console.error(err));
  }
  </code></pre>
  
  <p><strong>My tsconfig.json</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "sourceMap": true
    },
    "exclude": [
      "node_modules",
      "typings/main.d.ts",
      "typings/main"
    ],
    "filesGlob": [
      "./src/**/*.ts",
      "./test/**/*.ts",
      "!./node_modules/**/*.ts",
      "src/custom-typings.d.ts",
      "typings/browser.d.ts"
    ],
    "awesomeTypescriptLoaderOptions": {
      "useCache": true,
      "resolveGlobs": true,
      "forkChecker": true,
      "cacheDirectory": "node_modules/.awesome-typescript-loader-cache"
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "atom": { "rewriteTsconfig": false }
  }
  </code></pre>
  
  <p><strong>Webpack loaders:</strong></p>
  
  <pre><code>loaders: [
      // Support for .ts files.
      {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},   
  
   // Support for *.json files.
      {test: /\.json$/, loader: 'json-loader'},
  
      // Support for CSS as raw text
      {test: /\.css$/, loader: 'raw-loader'},
  
      // Support for SASS as raw text
      {test: /\.scss$/, loaders: ['raw-loader', 'sass-loader']},
  
      // Support for .html as raw text
      {test: /\.html$/, loaders: ['raw-loader']}
  ]
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "dependencies": {
      "angular2": "2.0.0-beta.8",
      "bootstrap": "^4.0.0-alpha.2",
      "es6-promise": "^3.1.2",
      "es6-shim": "^0.33.3",
      "es7-reflect-metadata": "^1.6.0",
      "ng2-bootstrap": "^1.0.6",
      "rxjs": "5.0.0-beta.2",
      "zone.js": "0.5.15"
    },
    "devDependencies": {
      "assets-webpack-plugin": "^3.4.0",
      "awesome-typescript-loader": "^0.16.0-rc.0",
      "clean-webpack-plugin": "^0.1.8",
      "compression-webpack-plugin": "^0.3.0",
      "copy-webpack-plugin": "^1.1.1",
      "css-loader": "^0.23.1",
      "es6-promise-loader": "^1.0.1",
      "exports-loader": "^0.6.3",
      "expose-loader": "^0.7.1",
      "file-loader": "^0.8.5",
      "html-loader": "^0.4.3",
      "html-webpack-plugin": "^2.9.0",
      "http-server": "^0.9.0",
      "ie-shim": "^0.1.0",
      "imports-loader": "^0.6.5",
      "istanbul-instrumenter-loader": "^0.2.0",
      "json-loader": "^0.5.4",
      "karma": "^0.13.21",
      "karma-chrome-launcher": "^0.2.2",
      "karma-coverage": "^0.5.3",
      "karma-jasmine": "^0.3.7",
      "karma-mocha-reporter": "^2.0.0",
      "karma-phantomjs-launcher": "^1.0.0",
      "karma-sourcemap-loader": "^0.3.7",
      "karma-webpack": "1.7.0",
      "ng2lint": "0.0.10",
      "node-sass": "^3.4.2",
      "parse5": "^1.3.2",
      "phantomjs-polyfill": "0.0.2",
      "phantomjs-prebuilt": "^2.1.4",
      "properties-parser": "^0.3.1",
      "protractor": "^3.1.1",
      "raw-loader": "0.5.1",
      "remap-istanbul": "^0.5.1",
      "rimraf": "^2.5.2",
      "sass-loader": "^3.2.0",
      "source-map-loader": "^0.1.5",
      "style-loader": "^0.13.0",
      "ts-helper": "0.0.1",
      "ts-node": "^0.5.5",
      "tslint": "^3.5.0",
      "tslint-loader": "^2.1.3",
      "typedoc": "^0.3.12",
      "typescript": "^1.8.7",
      "typings": "^0.7.8",
      "url-loader": "^0.5.7",
      "webpack": "^1.12.14",
      "webpack-dev-server": "^1.14.1",
      "webpack-md5-hash": "^0.0.5"
    },
    "repository": {
      "type": "git",
      "url": "https://github.com/angularclass/angular2-webpack-starter.git"
    },
    "engines": {
      "node": "&gt;= 4.2.1",
      "npm": "&gt;= 3"
    }
  }
  </code></pre>
  
  <p><strong>typings.json</strong></p>
  
  <pre><code>{
    "dependencies": {
      "es6-promise": "registry:npm/es6-promise#3.0.0+20160211003958",
      "moment": "registry:npm/moment#2.10.5+20160211003958",
      "source-map": "registry:npm/source-map#0.4.0+20160211003958"
    },
    "devDependencies": {},
    "ambientDependencies": {
      "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160127022504",
      "es6-shim": "registry:dt/es6-shim#0.31.2+20160215162030",
      "hammerjs": "registry:dt/hammerjs#2.0.4+20160103211821",
      "jasmine": "registry:dt/jasmine#2.2.0+20160308082659",
      "node": "registry:dt/node#4.0.0+20160311162451",
      "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20150825165336",
      "uglify-js": "registry:dt/uglify-js#2.6.1+20160106153543",
      "webpack": "registry:dt/webpack#1.12.9+20160125043835"
    }
  }
  </code></pre>