Primeng 不导入卡片组件

Primeng don't import card component

我会使用 Primeng Card 组件

module.ts中调用模块

 import { CardModule } from 'primeng/card';

编译时,angular没有找到模块

 ERROR in /home/haddad/projects/arrr/arrrt/src/app/app.module.ts (9,28): Cannot find module 'primeng/card'.

我使用的版本是4.2.4

当我更新到 primeng 版本 5 时出现此错误

ERROR in Error: Metadata version mismatch for module /home/haddad/projects/node_modules/primeng/components/sidebar/card.d.ts, found version 4, expected 3, resolving symbol AppModule in /home/haddad/projects/ar/arrt/src/app/app.module.ts, resolving symbol AppModule in /home/haddad/projects/ar/arrt/src/app/app.module.ts

而且我不得不使用 angular 4.

这是我的 package.json 以获取更多信息:

"dependencies": {
  "@angular/animations": "^4.3.6",
  "@angular/common": "^4.4.4",
  "@angular/compiler": "^4.4.4",
  "@angular/core": "^4.4.4",
  "@angular/forms": "^4.4.4",
  "@angular/http": "^4.4.4",
  "@angular/platform-browser": "^4.4.4",
  "@angular/platform-browser-dynamic": "^4.4.4",
  "@angular/router": "^4.4.4",
  "core-js": "^2.4.2",
  "font-awesome": "^4.7.0",
  "primeng": "^4.2.4",
  "rxjs": "^5.5.6",
  "zone.js": "^0.8.19"
},
"devDependencies": {
  "@angular/cli": "1.6.6",
  "@angular/compiler-cli": "~4.3.4",
  "@angular/language-service": "^4.3.4",
  "@types/jasmine": "~2.8.3",
  "@types/jasminewd2": "~2.0.2",
  "@types/node": "~6.0.60",
  "codelyzer": "^4.0.1",
  "jasmine-core": "~2.8.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~2.0.0",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.1.2",
  "ts-node": "~4.1.0",
  "tslint": "~5.9.1",
  "typescript": "~2.3.4"
}

要导入卡片模块,请尝试以下导入语句:

 import { CardModule } from 'primeng/primeng';

在互联网上搜索了 4 小时后,我意识到无法将 Card 组件与 Angular 4.

一起使用

在 PrimeNg 5.0.2 版本中创建的卡片组件:card new component

且PrimeNg 5.0.0及以上版本不兼容angular4:PrimeNg blog

Angular 5 Support

PrimeNG 5 fully support Angular 5, if your project is on Angular 4, the PrimeNG version to use would be 4.x as PrimeNG 5 does not work on Angular 4 due to AOT constraints.

有必要将 Angular 版本更新到 5.