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

Question

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?

Yeh

Answer 1

Update

This warning is coming from ng-packagr (and there's now a section of the ng-packagr docs about this). Turns out ng-packagr is just telling you that it wants you to add all dependencies to an "allowedNonPeerDependencies": [] property in ng-package.json (this option used to be called "whitelistedNonPeerDependencies"). For example:

{
  "allowedNonPeerDependencies": [
    "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.

Horne

You also need to add it to ng-package.prod.json for being able to build the library with --prod. – Tocology

I needed to whitelist only the entries in dependencies, not in devDependencies – Eardrum

The entry needs to be added to whitelistedNonPeerDependencies array in ng-package.json and not package.json – Fortunate

Awesome. It's simple and woks. Thanks in advance – Trough

Answer 2

Added this in ng-package.json and it worked for me

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "."
  ]
}

Redtop