CODEWITHSUNDEEP
angularnpmbootstrap-4ng-bootstrap
Milan Tenk
Milan Tenk

Reputation: 2715

Bootstrap 4 beta npm dependency with ng-bootstrap

In Bootstrap 4 beta there is a new dependency added, the popper.js. If I upgrade my npm dependencies in package.json to Bootstrap 4 beta and ng-bootstrap to 1.0.0-beta.5, I get "UNMET PEER DEPENDENCY" for popper.js. (When I call npm install.) However on the website of ng-bootstrap is written:

"No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code."

So I don't see the point. If I don't add it, I get the Warning above written. But the website asks me not to add it. What did I get wrong?

I won't use popper, so if it is not necessary, I don't want to add it to my dependencies.

Upvotes: 0

Views: 521

Answers (1)

antoine
antoine

Reputation: 688

I ran into the same problem, and even if it is documented, it could be more explicit...

It is written in ng-bootstrap getting started that it depends on Angular AND Bootstrap. Therefore you need to include bootstrap in your package.json and reference css/js files in your .angular-cli.json

But as written, in Bootstrap source documentation, bootstrap.min.js does not include Popper (required by bootstrap). You'll need either to import Popper by yourself or use bootstrap.bundle.min.js instead of bootstrap.min.js

Here is the files :

package.json :

...
 "dependencies": {
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "bootstrap": "^4.0.0-beta.3",
 },
...

app.module.ts :

...
  imports: [
   ...
   NgbModule.forRoot()
],
...

.angular-cli.json :

...
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ],
...

Upvotes: 2

Related Questions