Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste

Aniruddha Das picture Aniruddha Das · May 12, 2018 · Viewed 12.6k times · Source

In angular 6 project, I created angular library using angular cli command ng g lierary @some/libName. In my library, I have a component which needs @ng-bootstrap/ng-bootstrap, so I added it by npm i --save @ng-bootstrap/ng-bootstrap.

When I try to build the library using command ng build @some/libName --prod it throws below error.

Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste

Did anyone solved it?

Answer

John picture John · May 19, 2018

Update

This warning is coming from ng-packagr. Turns out ng-packagr is just telling you that it wants you to add all dependencies to a "whitelistedNonPeerDependencies": [] property in ng-package.json. For example:

{
  "whitelistedNonPeerDependencies": [
    "tslib",
    ...
  ]
}

Original

Just ran into this myself. This warning is coming from ng-packagr I think (which the angular-cli relies upon to generate and package libraries). I'm not exactly sure what they mean by "whitelist," as that phrasing doesn't seem to be directly explained in ng-packagr's docs, but this issue in the ng-packagr repo has a ton of different options for how to work around the problem.

  1. Peers (such as Angular, RxJS): in this use case, the third-party dependency is a peerDependency of your library. Users of your library need to include both your library and the third-party library in their dependencies section.
  2. Embedding (e.g. legacy JS libraries): you have a legacy JavaScript library (e.g. an adapter to a proprietary backend) and you want to (need to) embed the legacy code in your library. In this case, the third-party dependency is a devDependency of your library and will be embedded into the bundle of your library.
  3. Mixed mode - embedded & peer (e.g. UX guidelines, Angularized styleguide): in this use case, the third-party dependency is a peerDependency but also (partially) embedded in your library. You may want to re-use existing CSS/SCSS/LESS stylesheets from the third-party library in your library, thus "embedding" code from the third-party in your library. At the same time, the third-party dependency is a peerDependency of your library.

The github issue has more info on this.