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:
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"
}
}
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.