2017-08-17 17 views
8

Mới đối với Angular và Bootstrap và tôi đang cố gắng ít bằng cách tạo ứng dụng helloworld. Tôi đã thêm các thư viện bắt buộc nhưng tôi bị kẹt tại lỗi nàyVẫn nhận được "Lỗi không bắt buộc: Trình đơn thả xuống Bootstrap yêu cầu Popper.js" ngay cả sau khi bao gồm popper.js

Uncaught Error: Bootstrap dropdown require Popper.js

Tôi đã thêm tập lệnh popper.js, sau jquery và trước bootstrap js. nhưng trình duyệt vẫn ném lỗi.

Vui lòng trợ giúp.

mã trông như thế này:

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

Bạn đang sử dụng xây dựng popper.js nào? Bạn cần thiết bị UMD trong trường hợp này –

+0

được nén một popper.min.js – Pavan

+0

Phiên bản tôi đã tải xuống là v1.12.2. Cái nào là UMD? – Pavan

Trả lời

10

này đã làm việc cho tôi:

  1. popper.js sử dụng, đều trong cùng thư mục có tên "UMD" trong việc tải xuống bạn tìm thấy ở đây https://popper.js.org
  2. không lưu tệp trong cùng thư mục với bootstrap.js của bạn nhưng tạo thư mục riêng có tên "umd"
  3. d eclare popper.js trước bootstrap.js

Vì vậy, trong trường hợp của bạn, thay đổi

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

để

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

popper-utils là không cần thiết –

+0

Ok, cảm ơn, tôi vừa chỉnh sửa. – Konrad

0

Đã cùng một vấn đề và giải quyết nó. Hy vọng nó giúp!

Nếu bạn đang sử dụng Bootstrap.js trong dự án của bạn thì nó yêu cầu jquery và popper.js chạy trước bootstrap. các bước dưới đây có thể giải quyết được vấn đề:

  1. cd vào thư mục Dự án hoặc cd vào thư mục bootstrap của dự án. Execute:

    npm install popper.js --save 
    
  2. Đến http://getbootstrap.com/docs/4.0/getting-started/download/ Sao chép nội dung kịch bản và liên kết trong phần Bootstrap CDN trong đó nêu - Nếu bạn đang sử dụng biên soạn JavaScript của chúng tôi, đừng quên để bao gồm các phiên bản CDN của jQuery và Popper. js trước đó.

  3. file index.html của bạn có thể phải trông như thế này: (Dựa trên phiên bản của jquery và popper.js) Bạn đang tìm kiếm cơ bản 3 script src = "" thẻ theo thứ tự sau jquery> popper.js> bootstrap.js lưu ý: trình chỉnh sửa không cho phép tôi thêm thẻ tập lệnh. xin thêm chúng.

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

Indra4ev3r của câu trả lời làm việc cho tôi trên VS2015 Cập nhật 3 cho một dự án MVC5. Ví dụ, chuyển popper trước khi bootstrap.

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js", 
"~/Scripts/bootstrap.js")); 
Các vấn đề liên quan