PrimeNG不能在Angular库中使用吗？

Question

我对primeng和angular感到头疼，这一切都发生在我试图将primeng添加到Angular的库中的时候。

我所做的步骤是下一步。

ng g library generales

然后，我尝试将primeng安装到使用

npm install primeng --save
npm install primeicons --save

因此，这些依赖项作为库的依赖项添加到package.json中，所以这很酷，没有问题。例如，我想使用原始表，所以我将TableModule添加到GeneralesModule的imports数组中。如果我试图编译它，它需要angular/cdk和material依赖项，所以我使用以下命令安装它们

npm install --save @angular/material @angular/cdk @angular/animations 

我将我的组件放在使用primeng-table的库泛型上，我还在exports数组上声明了这个组件，因为我想在库之外使用它。

然后我转到源代码，将GeneralesModule添加到imports数组中，这样我就可以使用它的所有可导出组件，并且我在src/app中创建了一个组件，该组件使用位于generales库中的组件的选择器。

好的，然后我用ng serve启动它，它像预期的那样工作，但是如果我尝试使用ng build --prod，它会给我以下错误：

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@angular/cdk/bidi' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@angular/cdk/platform' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@angular/cdk/scrolling' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'primeng/components/common/shared' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'primeng/components/dropdown/dropdown' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'primeng/components/paginator/paginator' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'primeng/components/table/table' in 'C:\Users\tihom\Desktop\projects\testing\primengTesting\src\app'

为什么会发生这种情况？为什么在Generales库上安装src时，它还要在src上查找材料和primeng？

我已经尝试将primeng和material安装到src，并删除了上面的错误，但给了我另一个错误：

ERROR in : Illegal state: Could not load the summary for directive Dir in C:/Users/tihom/Desktop/projects/testing/primengTesting/projects/generales/node_modules/@angular/cdk/bidi/typings/index.d.ts.

我的库package.json

{
  "name": "generales",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.2.0",
    "@angular/core": "^7.2.0"
  },
  "dependencies": {
    "@angular/animations": "^8.1.3",
    "@angular/cdk": "^8.1.1",
    "@angular/material": "^8.1.1",
    "primeicons": "^2.0.0",
    "primeng": "^8.0.2"
  }
}

我的源package.json

{
  "name": "primeng-testing",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.3",
    "@angular/compiler": "~8.1.3",
    "@angular/core": "^8.1.3",
    "@angular/forms": "~8.1.3",
    "@angular/platform-browser": "~8.1.3",
    "@angular/platform-browser-dynamic": "~8.1.3",
    "@angular/router": "~8.1.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/build-ng-packagr": "~0.801.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler-cli": "~8.1.3",
    "@angular/language-service": "~8.1.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^5.1.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tsickle": "^0.35.0",
    "tslib": "^1.9.0",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5"
  },
  "peerDependencies": {}
}

我希望在库的外部使用者上使用primeng功能，比如只安装primeng一次而不是多次安装src。

Answer 1

如果你在PrimeFaces Github上看同样的问题，给出的答案似乎是有效的，至少在我的情况下是这样的。

https://github.com/primefaces/primeng/issues/7993

简而言之，由于您的src/package.json文件(应用程序项目)需要具有这些(PrimeNg、PrimeIcons、CDK、Material和Animations)依赖项，因此只需将这些依赖项添加到src/package.json中的依赖项中，清理并重新构建(清除nodes_module和npm缓存，然后运行npm i，然后运行ng serve和ng build --prod)。然后，您只需将这些依赖项移动到库package.json中的npm :在安装时，如果这些依赖项不存在，npm会警告用户安装它们。

Answer 2

你正在使用PrimeNG版本8和Angular版本7，至少我在你的同级依赖中看到了Angular 7。

它们不匹配。升级到Angular 8或降级到PrimeNG 7，并确保在node_modules中安装了正确的版本。