web-dev-qa-db-fra.com

Toujours obtenir "Erreur non interceptée: Bootstrap nécessite Popper.js" même après avoir inclus popper.js

Nouveau sur Angular et Bootstrap et j'essaye de peu de mains en créant l'application helloworld. J'ai ajouté les bibliothèques requises mais je suis bloqué à cette erreur

Erreur non interceptée: Bootstrap nécessite Popper.js

J'ai ajouté le script popper.js, après le jquery et avant bootstrap js. Mais le navigateur renvoie toujours l'erreur.

Veuillez aider.

le code ressemble à ceci:

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

Cela a fonctionné pour moi:

  1. utilisez popper.js qui se trouve dans le dossier nommé "umd" dans le téléchargement que vous trouvez ici https://popper.js.org
  2. n'enregistrez pas les fichiers dans le même dossier que votre bootstrap.js mais créez un dossier séparé nommé "umd"
  3. déclarer popper.js avant bootstrap.js

Donc, dans votre cas, changez

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

à

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

La réponse d'Indra4ev3r a fonctionné pour moi sur VS2015 Update 3 pour un projet MVC5. Par exemple, popper commuté avant bootstrap.

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

J'ai également eu cette erreur dans Visual Studio 2017.

quand j'ai supprimé "min" dans cette ligne

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

comme

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

et la fonction Menu déroulant a fonctionné!

0
Hulu Shao

Eu le même problème et l'a résolu. J'espère que ça aide!

Si vous utilisez Bootstrap.js dans votre projet, il nécessite jquery et popper.js pour s'exécuter avant bootstrap. les étapes ci-dessous peuvent résoudre le problème:

  1. cd dans le dossier Project ou cd dans le dossier bootstrap. Exécuter:

    npm install popper.js --save

  2. Accédez à http://getbootstrap.com/docs/4.0/getting-started/download/ Copiez le script et liez le contenu sous Bootstrap Section CDN qui indique - Si vous utilisez notre JavaScript compilé, n'oubliez pas d'inclure les versions CDN de jQuery et Popper.js avant.

  3. Votre fichier index.html peut ressembler à ceci: (Basé sur les versions de jquery et popper.js) Vous recherchez essentiellement 3 balises script src = "" dans l'ordre suivant jquery> popper.js> bootstrap.js note: l'éditeur ne me permet pas d'ajouter des balises de script. les pls les ajoutent.

    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