角度2。异常：在警报上找不到指令注释
Angular2. Exception: No Directive annotation found on Alert
我的浏览器日志中出现以下异常：
No Directive annotation found on Alert
堆栈跟踪：
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)
如何解决？
核心库：
- Angular 2
- Angular 2 bootstrap
构建系统：
这是我的源代码：
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 {
......
}
我的项目App组件
.... 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 脚本
Full source code of bootstrap script is here
export function main() {
return browser.bootstrap(App)
.catch(err => console.error(err));
}
我的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: [
// 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"
}
}
首先，确保两个 angular2 版本在你的 app -> package.json 和 ng2-bootstrap -> package.json
中匹配
你 npm 安装包。如果 angular2 的版本与依赖项的版本不匹配（也依赖于 angular2），它会导致 npm 将其放入依赖项的子文件夹中（这是正确的）。
所以结构变成这样：
|->node_modules
| |-> angular2@beta8
| |->ng2-bootstrap
| | |->node_modules
| | | |->angular2@beta7
这里的想法是一个包可以依赖于不同的版本（npm 包的好处之一）。但是对于 angular2，它会导致一些奇怪的重复错误，这些错误不会向开发人员显示。
如果您遇到此问题，目前最简单的解决方法是进入 ng2-bootstrap 子文件夹并将 node_modules 文件夹重命名为 _node_modules 直到依赖项在 ng2-bootstrap package.json 中更改为 peer dependencies.
您也可以在 ng2-bootstrap 中提出问题，他们会帮助您。
感谢@ekarlso 来自 this 期。
我的浏览器日志中出现以下异常：
No Directive annotation found on Alert
堆栈跟踪：
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)
如何解决？
核心库：
- Angular 2
- Angular 2 bootstrap
构建系统：
这是我的源代码：
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 {
......
}
我的项目App组件
.... 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 脚本
Full source code of bootstrap script is here
export function main() {
return browser.bootstrap(App)
.catch(err => console.error(err));
}
我的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: [
// 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"
}
}
首先，确保两个 angular2 版本在你的 app -> package.json 和 ng2-bootstrap -> package.json
你 npm 安装包。如果 angular2 的版本与依赖项的版本不匹配（也依赖于 angular2），它会导致 npm 将其放入依赖项的子文件夹中（这是正确的）。
所以结构变成这样：
|->node_modules
| |-> angular2@beta8
| |->ng2-bootstrap
| | |->node_modules
| | | |->angular2@beta7
这里的想法是一个包可以依赖于不同的版本（npm 包的好处之一）。但是对于 angular2，它会导致一些奇怪的重复错误，这些错误不会向开发人员显示。
如果您遇到此问题，目前最简单的解决方法是进入 ng2-bootstrap 子文件夹并将 node_modules 文件夹重命名为 _node_modules 直到依赖项在 ng2-bootstrap package.json 中更改为 peer dependencies.
您也可以在 ng2-bootstrap 中提出问题，他们会帮助您。
感谢@ekarlso 来自 this 期。