Angular 角度2。异常:未在警报中找到指令批注
我的浏览器日志中出现以下异常: 未在警报中找到指令批注 堆栈跟踪:Angular 角度2。异常:未在警报中找到指令批注,angular,webpack,angular2-template,angular2-directives,ng2-bootstrap,Angular,Webpack,Angular2 Template,Angular2 Directives,Ng2 Bootstrap,我的浏览器日志中出现以下异常: 未在警报中找到指令批注 堆栈跟踪: 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
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)
如何修复它
核心图书馆:
- 角度2
以下是我的源代码: 角度2引导 这部分代码属于ng2引导框架 我的项目应用程序组件
.... 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();
}
}
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 }
}
{
"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"
}
}
{
"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"
}
}
网页包加载程序:
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
{
"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 }
}
{
"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"
}
}
{
"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"
}
}
typings.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 }
}
{
"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"
}
}
{
"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"
}
}
首先,确保您的
app->package.json
和ng2 bootstrap->package.json
您需要npm安装这些软件包。如果angular2的版本与依赖项的版本不匹配(谁也依赖angular2),则会导致npm将其放在依赖项的子文件夹中(这是正确的)
因此,结构变得类似于:
|->node_modules
| |-> angular2@beta8
| |->ng2-bootstrap
| | |->node_modules
| | | |->angular2@beta7
这里的想法是,包可以依赖于不同的版本(npm包的好处之一)。但对于angular2,它会导致一些奇怪的复制错误,而开发人员并没有看到这些错误
如果您目前正遭受此问题的困扰,最简单的修复方法是进入ng2引导子文件夹并将node_modules文件夹重命名为_node_modules,直到ng2 bootstrap package.json中的依赖项更改为对等依赖项
你也可以在中打开一个问题,他们会帮助你解决
credit@ekarlso from issue.你所说的
模板:ALERT_template是什么意思?
?哦,好吧,它属于ng2引导
,我想它属于你的代码。非常感谢!它解决了我的问题。最近我浪费了一天的时间来寻找解决方案……我只想指出,如果升级到Angular2 beta 16和ng2 bootstrap 1.0.14,依赖关系应该得到解决。