Question

我创建了一个新的angular-cli（版本1.0.5）项目并添加了npm模块ng2-spin-kit（版本1.3.0）。然后我修改文件 src / app / app.module.ts 和 src / app / app.component.html 以测试组件 WaveComponent

构建和启动服务器（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中）时，WaveComponent源可用。捆绑包也包含此组件。

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

Answer 1

对我而言，似乎你的版本与@angular软件包有冲突（常见，编译器，平台浏览器等。检查npm上的ng2-spin-kit依赖关系）。

Ng2-spin-kit使用版本2，您的项目使用版本4.

我尝试将ng2-spin-kit添加到cli项目中，该项目使用这些库中的版本2，旋转器就像魅力一样。

如果你坚持使用角度版本4，我没有你的解决方案，但是如果版本2没有问题，那么：

我能做这项工作的方式是：

更新您的package.json
已清除node-modules文件夹（如果已存在）
npm install

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

Angular CLI项目找不到ng2-spin-kit中的组件

1 个答案: