Angular2。例外:在Alert上没有发现任何指令注释

Question

我在浏览器日志中得到以下异常：

没有在警报上找到指令注释

堆栈跟踪：

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自举

建立系统：

• Webpack

这是我的源代码：

角2自举 'alert.component.ts‘

这部分代码属于ng2-bootstrap框架。

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

我的项目应用程序组件

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

}

引导脚本

引导脚本的完整源代码是这里

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: [
    // 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

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

你要安装软件包。如果angular2的版本不匹配依赖项的版本(也依赖于angular2)，则会导致npm将其放在依赖项的子文件夹中(这是正确的)。

所以这个结构就像：

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

这里的想法是包可以依赖于不同的版本( npm包的好处之一)。但是对于angular2，它会导致一些奇怪的复制错误，而这些错误并没有显示给开发人员。

如果您目前正遭受此问题，最简单的解决方法是进入NG2引导子文件夹，并将node_modules文件夹重命名为_node_modules，直到NG2引导package.json中的依赖项更改为对等依赖关系为止。

您也可以在NG2-自举中打开一个问题，它们将帮助您解决问题。

来自https://github.com/justindujardin/ng2-material/issues/38的Credit@ekarlso。