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

20,540

Solution 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.

Solution 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": [
    "."
  ]
}
Share:
20,540
Aniruddha Das
Author by

Aniruddha Das

A self-motivated full-stack, multi-domain and solutions-orientated JavaScript, ES6, Typescript, Angular (7), AngularJS, jQuery, HTML, CSS, JAVA, J2EE, Spring, PHP, Shell Script, PL SQL, MySQL, AWS, Google App Engine, Google Datastore, JPA, Cucumber BDD Professional with more then 11+ Years of IT experience in a various IT stages including Design, developing, Unit testing and enhancement and support application.

Updated on May 05, 2021

Comments

  • Aniruddha Das
    Aniruddha Das over 2 years

    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?