PrimeNG cannot be used in Angular libraries?

Question

I'm having headache with primeng and angular, it all happens when i try to add primeng to a Angular's library.

The steps i did are the next.

ng g library generales

Then i try to install primeng on the library generated by using

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

So those dependencies are added to the package.json as dependencies of the library so its cool no problem. Then i want for instance use the primeng table, so i add TableModule to the imports array of GeneralesModule. If i try to compile it says that it needs angular/cdk and material dependencies so i install them using the following command

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

I make my component on the library generales which uses the primeng-table, also i declare this component on the exports array because i want to use it outside the library.

Then i go to the source and i add GeneralesModule to the imports array so i can use all of its exportables components and i make a component in src/app which uses the selector of the component located in the generales library.

Okey, then i start it with ng serve and it works as expected but if i try to use ng build --prod it gives me the following errors:

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'

Why it is happening? Why is it trying to look on the src for material and primeng when it is installed on the library Generales?

I've tried to install primeng and material to the src and removes the errors above but gives me another:

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.

My library 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"
  }
}

My src 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": {}
}

I expect to use primeng features on external consumers of the library like the src with installing primeng only once and not multiple times.

Answer 1

You are using PrimeNG version 8 with Angular version 7. At least I see Angular 7 in your peer dependencies.

They don't match. Either upgrade to Angular 8 or downgrade to PrimeNG 7, and make sure you have correct versions installed in node_modules.

Answer 2

If you look at the same issue on the PrimeFaces Github , the given answer seems to work , at least in my case .

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

In short, as your src/package.json file (application project) needs to have those (PrimeNg, PrimeIcons, CDK, Material and Animations) dependencies , so just add those to you dependencies in src/package.json , clean and rebuild (clear nodes_module and npm cache , then run npm i , then ng serve and ng build --prod). Then , you just need to move those dependencies to PeerDependencies in your library package.json : while installing , if those dependencies are not present npm will warn your users to install them .