web-dev-qa-db-ja.com

popper.jsを含めた後でも「Uncaught Error：Bootstrap dropdown require Popper.js」が表示される

Angular and Bootstrapと私は、helloworldアプリを作成することで少し手を試しています。必要なライブラリを追加しましたが、このエラーで止まっています。

不明なエラー：BootstrapドロップダウンにはPopper.jsが必要です

Jqueryの後、bootstrap js。の前にpopper.jsスクリプトを追加しましたが、それでもブラウザーはエラーをスローします。

助けてください。

コードは次のようになります。

<!DOCTYPE html>
<html ng-app="helloWorld" lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Index</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

</head>

<body ng-controller="mainCtrl">{{message}}

<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
</body>

</html>
javascriptjqueryangularjstwitter-bootstrap
10
Pavan

これは私のために働いた：

  1. ここにあるダウンロードの「umd」という名前のフォルダーにあるpopper.jsを使用します https://popper.js.org
  2. しないbootstrap.jsと同じフォルダーにファイルを保存しますが、「umd」という名前の別のフォルダーを作成します
  3. bootstrap.jsの前にpopper.jsを宣言します

だから、あなたの場合、変更する

<script src="js/popper.min.js" type="text/javascript"></script>

に

<script src="js/umd/popper.min.js" type="text/javascript"></script>
20
Konrad

Indra4ev3rの答えは、MVC5プロジェクトのVS2015 Update 3でうまくいきました。たとえば、ブートストラップの前にポッパーを切り替えます。

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js"));
3
bflint

VisualStudio 2017でもこのエラーが発生しました。

この行で「min」を削除したとき

    <script src="Scripts/popper.min.js"></script>

として

    <script src="Scripts/popper.js"></script>

dropDownMenu関数が機能しました！

0
Hulu Shao

同じ問題を抱えて解決しました。それが役に立てば幸い！

プロジェクトでBootstrap.jsを使用している場合、ブートストラップの前に実行するにはjqueryとpopper.jsが必要です。以下の手順で問題を解決できる場合があります。

  1. プロジェクトのフォルダーにcdするか、プロジェクトのbootstrapフォルダーにcdします。実行：

    npm install popper.js --save

  2. http://getbootstrap.com/docs/4.0/getting-started/download/ にスクリプトをコピーし、Bootstrap CDNセクション-Ifコンパイル済みのJavaScriptを使用している場合、その前にjQueryとPopper.jsのCDNバージョンを含めることを忘れないでください。

  3. Index.htmlファイルは次のようになります：（jqueryおよびpopper.jsのバージョンに基づいて）基本的に、次の順序で3つのスクリプトsrc = ""タグを探していますjquery> popper.js> bootstrap.js注：エディターでは、スクリプトタグを追加できません。 plsはそれらを追加します。

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">

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">

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">
0
Indra4ev3r