Angular CLI项目找不到NG2-Spin-Kit的组件

Question

i创建一个新的Angular-CLI(版本1.0.5(项目，并添加NPM模块NG2-Spin-kit(版本1.3.0(。然后，我修改文件 src/app/app.module.ts 和 src/app/app com.component.html strong>。

构建和启动服务器(ng serve(无问题。但是在浏览器中启动应用程序会导致此启动失败：

Uncaught Error: Unexpected value 'WaveComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (http://localhost:4200/vendor.bundle.js:43136:34)
    at http://localhost:4200/vendor.bundle.js:56868:40
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:56850:54)
    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:68126:70)
    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:68099:36)
    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:68028:37)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:6052:25)
    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:6038:21)
    at Object.171 (http://localhost:4200/main.bundle.js:19:124)

完整的项目可用：
https://github.com/manfredsteiner/ng2-cli-test-spin-kit

关注源(在VSCODE中(时，WAV分解源可用。捆绑包包含此组件。

有什么想法出了什么问题？我可以检查什么以找到原因？

Answer 1

对我来说，似乎您的版本与@Angular软件包(常见，编译器，平台浏览器等。检查NG2-Spin-kit依赖性在NPM上(。

ng2-spin-kit使用版本2，您的项目使用版本4。

我尝试将NG2-Spin-kit添加到CLI项目中，该项目使用这些库中的版本2，并且旋转器像魅力一样工作。

如果您坚持使用Angular版本4，我没有解决方案，但是如果版本2比：

：

我可以做这项工作的方式是：

1. 更新您的软件包
2. 清除的节点模块文件夹(如果已经存在(
3. NPM安装

4. npm安装ng2-spin-kit -save

   {
     "name": "ng2-cli-test-spin-kit",
     "version": "0.0.0",
     "license": "MIT",
     "scripts": {
       "ng": "ng",
       "start": "ng serve",
       "build": "ng build",
       "test": "ng test",
       "lint": "ng lint",
       "e2e": "ng e2e"
     },
     "private": true,
     "dependencies": {
       "@angular/common": "^2.4.10",
       "@angular/compiler": "^2.4.10",
       "@angular/core": "^2.4.10",
       "@angular/forms": "^2.4.10",
       "@angular/http": "^2.4.10",
       "@angular/platform-browser": "^2.4.10",
       "@angular/platform-browser-dynamic": "^2.4.10",
       "@angular/router": "^3.4.10",
       "core-js": "^2.4.1",
       "ng2-spin-kit": "^1.3.0",
       "rxjs": "^5.1.0",
       "zone.js": "^0.8.4"
     },
     "devDependencies": {
       "@angular/cli": "~1.1.0",
       "@angular/compiler-cli": "^2.4.10",
       "@types/jasmine": "2.5.38",
       "@types/node": "~6.0.60",
       "codelyzer": "~2.0.0",
       "jasmine-core": "~2.5.2",
       "jasmine-spec-reporter": "~3.2.0",
       "karma": "~1.4.1",
       "karma-chrome-launcher": "~2.1.1",
       "karma-cli": "~1.0.1",
       "karma-jasmine": "~1.1.0",
       "karma-jasmine-html-reporter": "^0.2.2",
       "karma-coverage-istanbul-reporter": "^0.2.0",
       "protractor": "~5.1.0",
       "ts-node": "~2.0.0",
       "tslint": "~4.5.0",
       "typescript": "~2.3.2"
     }
   }