Angular2. Exception: No Directive annotation found on Alert

Issue

I am getting the following exception in my browser logs:

No Directive annotation found on Alert

Stacktrace:

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)

How to fix it?


Core libraries:

Build system:


Here is my source code:

Angular 2 bootstrap ‘alert.component.ts’

This part of code belongs to ng2-bootstrap framework.

@Component({
  selector: 'alert',
  directives: [NgIf, NgClass],
  template: ALERT_TEMPLATE
})
export class Alert {
  ......
}

My project App component

.... Other imports ....
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: 'app',
    providers: [],
    directives: [Alert],    // <----- 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();
    }

}

Bootstrap script

Full source code of bootstrap script is here

export function main() {
    return browser.bootstrap(App)
        .catch(err => console.error(err));
}

My tsconfig.json

{
  "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 }
}

Webpack loaders:

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']}
]

package.json

{
  "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": ">= 4.2.1",
    "npm": ">= 3"
  }
}

typings.json

{
  "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"
  }
}

Solution

First of all, make sure both angular2 versions match in your app -> package.json and in ng2-bootstrap -> package.json

You npm install the packages. If the version of angular2 does not match the version of a dependency (who also has a dependency on angular2) it causes npm to put that in a sub-folder of the dependency (which is correct).

So the structure becomes something like:

|->node_modules
|      |-> angular2@beta8
|      |->ng2-bootstrap
|      |        |->node_modules 
|      |        |        |->angular2@beta7

The idea here is that a package can have a dependency on a different version (one of the benefits of npm packages). But with angular2 it causes some weird duplication error that is not shown to the developer.

If you are suffering from this problem currently the easiest fix is to go into the ng2-bootstrap sub-folder and rename the node_modules folder to _node_modules until the dependencies within the ng2-bootstrap package.json are changed to peer dependencies.

You can also open an issue in ng2-bootstrap and they will help you out.

credit @ekarlso from this issue.

Answered By – Murhaf Sousli

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.