What is the proper way to use a dependent npm package in angular 6 library project?

Question

I'm a little confused as to how im supposed to reference external npm packages in my library angular6 project. We have an internal scss library I'd like to use to style my reusable components in my library. How do i go about importing that?

package.json for lib project:

{   "name": "ikr-lib",   "version": "0.0.1",   "peerDependencies": {     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",     "@angular/core": "^6.0.0-rc.0 || ^6.0.0",     "document-register-element": "1.8.1"   },   "dependencies": {     "element.ui": "^1.0.1"   } } 

When I build the library project I get this:

Distributing npm packages with 'dependencies' is not recommended. Please consider adding element.ui to 'peerDependencies' or remove it from 'dependencies'.  BUILD ERROR Dependency element.ui must be explicitly whitelisted. 

Answer 1

It looks like adding the package name to a "whitelistedNonPeerDependencies" collection in the ng-package.json file will resolve this build issue. I'm still not sure what the best practice is here though. Should we create angular libraries that have dependancies on other npm packages or is it best to only have peerDependancies?

ng-package.json file:

{   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",   "dest": "../../dist/ikr-lib",   "deleteDestPath": false,   "lib": {     "entryFile": "src/public_api.ts"   },   "whitelistedNonPeerDependencies": [     "element.ui"   ] }