Phụ thuộc Bootstrap4 PopperJs ném lỗi trên Angular

Tôi vừa tạo một thương hiệu mới góc-clidự án
và chạy npm install bootstrap@4.0.0-beta jquery popper.js --save
và thay đổi các phần liên quan của .angular-cli.json như bên dưới

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

tuy nhiên nhận được lỗi bên dưới

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

bất kỳ ý tưởng làm thế nào để sửa chữa nó?

Nhìn vào tài liệu tại https://getbootstrap.com/docs/4.2/getting-started/introduction/#js, bạn có thể thấy rằng chúng nhập những thứ sau:

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

Lưu ý đặt tên: jquery. mỏng .min.js, UMD /popper.min.js!

Do đó, tôi đã sử dụng những điều sau đây trong .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"
      ],

Sau đó nó dường như hoạt động ngay bây giờ.

Tôi đã từng gặp vấn đề tương tự. Giải pháp của tôi là không để nhập khẩu các thư mục dist-(./node_modules/popper.js/dist/popper.js) mà là UMD-thư mục (./node_modules/popper.js/dist/ UMD /popper.js). Không quan trọng nếu bạn nhận được phiên bản mini hay bình thường của tệp js.

Tôi có thể thấy rằng nhiều người đang đấu tranh với việc thêm và bao gồm đúng cách các phụ thuộc Bootstrap 4 (jQuery, popper.js, v.v.). Nhưng có một giải pháp dễ dàng hơn nhiều ở dạng https://ng-bootstrap.github.io .

ng-bootstrap cung cấp các chỉ thị Angular gốc được viết từ đầu. Kết quả tích cực là: * bạn không cần phải bao gồm và lo lắng về jQuery, popper.js, v.v. * các chỉ thị cung cấp các API "có ý nghĩa" trong thế giới Angular

Đối với bất kỳ ai đang cố gắng sử dụng Bootstrap 4.beta với Angular - ng-bootstrap vừa phát hành bản beta đầu tiên hoàn toàn tương thích với Bootstrap 4.beta CSS

Nếu bạn làm việc trong Asp.net Mvc umd cũng làm được điều đó.

Như trong https://stackoverflow.com/a/50839939/8497522 chỉ cần thêm vào BundleConfig.cs:

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

ngoại trừ:

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

Để chạy phương thức, vui lòng thay đổi mục tiêu từ "es2015" thành "es5" trong 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"] 
}