Ketergantungan bootstrap4 PopperJs membuat kesalahan pada Angular

95

Saya baru saja membuat merek baru angular-cliproyek
dan menjalankan npm install [email protected] jquery popper.js --save
dan mengubah bagian terkait .angular-cli.json seperti di bawah ini

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

namun menerima kesalahan di bawah

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

tahu bagaimana cara memperbaikinya?

twitter-bootstrap angular webpack popper.js cilerler.dll
sumber
aneh, saya membuatnya bekerja untuk saya. apakah kamu menggunakan cli terbaru? dapatkah Anda mencoba menginstal ulang node_modules
LLai
1
Kesalahannya pasti ada di tempat lain
brijmcq
@LLai @angular/cli: 1.3.0 node: 6.11.2 npm: 5.3.0apakah Anda mengubah bagian dalam .angular-cli.json jika Anda tidak melakukannya, Anda tidak akan melihat kesalahan di konsol.
cilerler
ya saya memiliki skrip & gaya yang tepat. [email protected] [email protected] [email protected]
LLai
saya tidak yakin seberapa banyak ini akan membantu tetapi Anda dapat melihat pertanyaan ini di halaman ini, ada pertanyaan tentang cara menambahkan libs pihak ketiga
Rahul Singh

Jawaban:

224

Melihat dokumen di https://getbootstrap.com/docs/4.2/getting-started/introduction/#js Anda dapat melihat bahwa mereka mengimpor yang berikut ini:

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

Perhatikan penamaannya: jquery. slim .min.js, UMD /popper.min.js!

Oleh karena itu saya menggunakan yang berikut ini di saya .angular-cli.json:

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

Setelah itu tampaknya berfungsi sekarang.

Martin Bauer
sumber
Apa yang Anda miliki di packages.json untuk jquery? Di folder jquery node_modules saya, saya tidak memiliki jquery.slim.min.js. Sebenarnya baru saja menemukannya di jquery 3.2.1
Jim Culverwell
2
Package.json saya terlihat sebagai berikut untuk jquery: `" jquery ":" ^ 3.2.1 "` Saya telah mengujinya dengan versi lengkap jquery juga, tampaknya berfungsi juga. Hanya ** umd ** / popper.min.js yang tampaknya perlu.
Martin Bauer
2
Jawaban ini memiliki 76 suara positif ... pengembang memberikan "RTFM" yang tajam / hampir masalah Github menanyakan pertanyaan yang sama 😂
brandones
4
Menggunakan jQuery-slim atau tidak tidak masalah, tetapi menggunakan popper.js versi umd memperbaikinya, terima kasih!
finstas
2
Menggunakan /dist/umdalih-alih /distdalam ketergantungan popper melakukan triknya. Terima kasih.
redent84
50

Saya memiliki masalah yang sama. Solusi saya adalah tidak untuk mengimpor dist-folder (./node_modules/popper.js/dist/popper.js) melainkan UMD-folder (./node_modules/popper.js/dist/ UMD /popper.js). Tidak masalah jika Anda mendapatkan versi mini atau normal dari file js.

Björn Bergenheim
sumber
3

Saya dapat melihat bahwa banyak orang berjuang dengan menambahkan dan memasukkan dependensi Bootstrap 4 dengan benar (jQuery, popper.js, dll.). Tetapi ada solusi yang lebih mudah dalam bentuk https://ng-bootstrap.github.io .

ng-bootstrap menyediakan arahan Angular asli yang ditulis dari awal. Konsekuensi positifnya adalah: * Anda tidak perlu menyertakan dan khawatir tentang jQuery, popper.js, dll. * Direktif menyediakan API yang "masuk akal" di dunia Angular

Bagi siapa pun yang mencoba menggunakan Bootstrap 4.beta dengan Angular - ng-bootstrap baru saja merilis versi beta pertamanya yang sepenuhnya kompatibel dengan Bootstrap 4.beta CSS

pkozlowski.opensource
sumber
Jauh lebih mudah jika Anda menggunakan Angular, tetapi tidak jika Anda menggunakan AngularJS ...
El Mac
1
Nah, pertanyaannya adalah tentang Angular dan angular-cli jadi tidak yakin mengapa AngularJS dibawa ke sini ...
pkozlowski.opensource
1

Jika Anda bekerja di Asp.net Mvc umd juga melakukan hal tersebut.

Seperti di https://stackoverflow.com/a/50839939/8497522 tambahkan saja di BundleConfig.cs:

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

kecuali:

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

Untuk menjalankan modal, ubah target dari "es2015" menjadi "es5" di tsconfig.ts

"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"] 
}
Maniraj A
sumber