9

I'm having trouble using some ng-bootstrap dropdown component because of dependency on jquery 3x which in turn cannot find popper.js

See this in my console

Uncaught Error: Bootstrap dropdown require Popper.js

How do I get around this?

Install of jquery using npm shows the dependency on popper.js that's not in npm registry

└── UNMET PEER DEPENDENCY popper.js@^1.11.0

Here are my dependencies in package.json

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.1",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
molerat
  • 946
  • 4
  • 15
  • 43
Jimmy Fencer
  • 188
  • 1
  • 1
  • 10
  • `popper.js` is just a `WARN`, bootstrap@4.0.0-beta installed without problems. – BogdanC Aug 13 '17 at 05:47
  • Yes bootstrap is installed but looks like it needs popper.js, my issue is that the bootstrap dropdown won't work. How do i get jquery to install with this popper.js that's not in npm registry? VM231:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports ( – Jimmy Fencer Aug 13 '17 at 15:29
  • As stated on ng-bootstrap doc [here](https://ng-bootstrap.github.io/#/getting-started), it has no dependency on jquery or bootstrap.js. Only dependencies are angular and bootstrap.css – BogdanC Aug 14 '17 at 03:07
  • Yes, that's what the documentation says. – Jimmy Fencer Aug 14 '17 at 12:49

3 Answers3

17

Popper.js can be now installed from npm:

npm install popper.js --save
Amio.io
  • 20,677
  • 15
  • 82
  • 117
-1

Might be you dependencies should be as below.

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.1",
    "@bootstrap": "^4.0.0-beta",
    "@core-js": "^2.4.1",
    "@font-awesome": "^4.7.0",
    "@jquery": "^3.2.0",
    "@rxjs": "^5.4.2",
    "@zone.js": "^0.8.14"
  },

Hope I will work

Mayank Vadiya
  • 1,437
  • 2
  • 19
  • 32
Alberto
  • 1
-2

Found the answer here bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js

Looks like popper.js is not in npm registry but theres a cdn to it, adding below to my apps index.html solves the dropdown issue

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
Jimmy Fencer
  • 188
  • 1
  • 1
  • 10