it-swarm.com.de

Bootstrap 4 Abhängigkeit Popper Js wirft einen Fehler auf Angular

Ich habe gerade ein brandneues angle-cli -Projekt erstellt
und lief npm install [email protected] jquery popper.js --save
und änderte die verwandten Teile des .angular-cli.json wie folgt

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

der folgende Fehler wird jedoch angezeigt

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

eine Idee, wie man es reparieren kann?

danke im Voraus...

86
cilerler

In den Dokumenten unter https://getbootstrap.com/docs/4.2/getting-started/introduction/#js sehen Sie, dass sie Folgendes importieren:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Beachten Sie die Benennung: jquery .slim .min.js, umd /popper.min.js!

Deshalb habe ich in meinem .angular-cli.json folgendes verwendet:

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

Danach scheint es jetzt zu funktionieren.

205
Martin Bauer

Ich hatte das gleiche Problem. Meine Lösung war not, um den dist-Ordner (./node_modules/popper.js/dist/popper.js) zu importieren, sondern den umd-Ordner (./node_modules/popper.js/dist/umd /popper.js). Egal ob Sie die Mini- oder normale Version der js-Datei erhalten.

41

Ich kann sehen, dass viele Leute Schwierigkeiten haben, Bootstrap 4-Abhängigkeiten (jQuery, popper.js usw.) hinzuzufügen und ordnungsgemäß zu integrieren. Es gibt jedoch eine wesentlich einfachere Lösung in Form von https://ng-bootstrap.github.io .

ng-bootstrap enthält native Angular-Direktiven, die von Grund auf geschrieben werden. Die positive Konsequenz ist, dass: * Sie müssen keine Anweisungen für jQuery, popper.js usw. enthalten

Für alle, die Bootstrap 4.beta mit Angular verwenden möchten, hat ng-bootstrap gerade seine erste Beta-Version veröffentlicht, die vollständig mit Bootstrap 4.beta CSS kompatibel ist

Wenn Sie in Asp.net Mvc umd arbeiten, machen Sie das auch.

Wie in https://stackoverflow.com/a/50839939/8497522 fügen Sie einfach BundleConfig.cs hinzu:

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

außer:

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));
0
Damian Kurek

Um modal auszuführen, ändern Sie das Ziel in tsconfig.ts von "es2015" in "es5"

"styles": [ "src/styles.css", 
            "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
            "node_modules/popper.js/dist/umd/popper.min.js", 
            "node_modules/bootstrap/dist/js/bootstrap.min.js"] 
}
0
Maniraj A