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.

see the discussion here for same error https://github.com/ng-packagr/ng-packagr/issues/716 — kumar chandraketu, Dec 12 '20 at 06:39

score 16 · Accepted Answer · answered Jul 09 '18 at 14:08

16

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"
  ]
}

answered Jul 09 '18 at 14:08

cobolstinks

6,801
16
68
97

9

I wish there were a definitive answer to your question. It's pretty annoying to have a harsh warning in the output but then not explain why anywhere. – Matthew Dolman Sep 26 '18 at 03:34
wondering if in the package.json instead of adding the dependency to the lib you could do an npm install of the dependency so that during build it will install it? A. can you do this and b. would it be better because if the dependency was already installed it wouldnt' conflict? – Christian Matthew Aug 01 '19 at 05:26
2

If you want to ignore this mechanism, you can whitelist all dependencies using `"whitelistedNonPeerDependencies": ["."]` – Sébastien Tromp Oct 09 '19 at 14:16
1

3.5 years and one pandemic later, this warning is still annoying, in my case using dependencies is definitely the correct approach, yet seeing the warning brought me back here to see that it was a nothingburger – Matthew Dolman Jan 21 '22 at 08:57

score 13 · Answer 2 · answered Sep 26 '18 at 14:59

This is more of a guess/ramble than an official answer, but here's what I gather from what I've found and thought so far.

The source code gives a clue about their reasoning:

// Verify non-peerDependencies as they can easily lead to duplicate installs or version conflicts in the node_modules folder of an application

So I think they're concerned about a scenario where you have a dependency of one version in the library itself, while the application consuming that library may have another version it uses.

Using ^ in the version is the default configuration for installing dependencies Also, using ^ in the version number will deduplicate dependencies that differ by minor or patch versions. So I think the main concern would be around major version.

A few examples from the perspective of the app's node_modules:

App: ^2.8.3, Library: ^2.8.0 => deduplicated (2.8.3)
App: ^2.9.0, Library: ^2.3.4 => deduplicated (2.9.0)
App: ^3.0.1, Library: ^2.3.4 => duplicate (3.0.1 and 2.3.4 exist)

This could bloat the application size, or cause a conflict in terms of what version the tools will attempt to load as a dependency.

This answer also talks a little bit about why to use peerDependencies instead.

The answer you linked to is the classic case of why you should use peer dependencies; a plugin for another framework needs to make sure it's using the same object, so it uses the host's version, not a private version. Consider removing that link or adding extra information since it doesn't really apply to the question being asked which is: My library uses others libraries and doesn't want to force the user to download all my dependencies on their own or wants to make sure I'm using the correct version even if the user is using another version. Good rambling otherwise :) — Ruan Mendes, Jan 30 '20 at 19:40
Nice findings! Pretty sure this comment you found is the explanation. Cheers! — Maxime Dupré, Sep 08 '20 at 19:44

score 0 · Answer 3 · answered Dec 12 '20 at 06:35

you can whitelist using these way in your ng-package.json file:

 {
  .....
  "whitelistedNonPeerDependencies": [
    "angular" // it matches using regular expression 
  ]
 }

you can completely suppress this using below approach
{
  .....
  "whitelistedNonPeerDependencies": [
    "."
  ]
 }

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

3 Answers3