Bootstrap4 依赖项 PopperJs 在 Angular 上抛出错误

Question

我刚刚创建了一个 b运行d 新 angular-cli 项目
和运行 npm install bootstrap@4.0.0-beta jquery popper.js --save
并将 .angular-cli.json 的相关部分更改如下

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

然而收到以下错误

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

知道如何解决吗？

Answer 1

我看到很多人都在努力添加和正确包含 Bootstrap 4 个依赖项（jQuery、popper.js 等）。但是有一个更简单的解决方案，形式为 https://ng-bootstrap.github.io.

ng-bootstrap 提供从头开始编写的 native Angular 指令。积极的后果是： * 您无需包含和担心 jQuery、popper.js 等。 * 指令提供 Angular 世界

中 "make sense" 的 API

对于任何尝试将 Bootstrap 4.beta 与 Angular 一起使用的人 - ng-bootstrap 刚刚发布了第一个与 Bootstrap 完全兼容的测试版 4.beta CSS

Answer 2

查看 https://getbootstrap.com/docs/4.2/getting-started/introduction/#js 上的文档，您可以看到他们导入了以下内容：

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

注意命名：jquery.slim.min.js, umd/popper.min.js!

因此我在 .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"
      ],

在那之后它现在似乎可以工作了。

Answer 3

我遇到了同样的问题。我的解决方案是 而不是 来导入 dist 文件夹 (./node_modules/popper.js/dist/popper.js)，而是导入 umd 文件夹 (./node_modules/popper。 js/dist/umd/popper.js)。不管你得到的是迷你版还是普通版的 js 文件。

Answer 4

如果你在 Asp.net Mvc umd 中工作，也可以这样做。

与一样，只需添加BundleConfig.cs:

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

除了：

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

Answer 5

到运行模态请在tsconfig.ts

中将目标从"es2015"更改为"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"] 
}

Answer 6

在上面的答案中找到提示：

1)在bootstrap

之前包含popper.js

更新 popper.js 文件的路径。使用 /dist/umd 而不是 /dist

popper 的正确路径在 angular-cli.json 文件中是

./node_modules/popper.js/dist/umd/popper.js

Bootstrap4 依赖项 PopperJs 在 Angular 上抛出错误

Bootstrap4 dependency PopperJs throws error on Angular

twitter-bootstrap

webpack

angular

popper.js