Angular 2。异常 : No Directive annotation found on Alert

Question

我的浏览器日志中出现以下异常:

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

构建系统:

• Webpack

---

这是我的源代码:

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();
    }

}

引导脚本

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

Answer 1

首先，确保 app -> package.json 和 ng2-bootstrap -> package.json 中的两个 angular2 版本匹配

你 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 中的依赖项更改为对等依赖项。

您也可以在 ng2-bootstrap 中提出问题他们会帮助你。

来自 this 的@ekarlso问题。