Bootstrap4依赖项PopperJs在Angular上引发错误

95

我刚刚创建了一个全新的角度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

任何想法如何解决？

— 西勒勒
source

奇怪的是，我得到它为我工作。您正在使用最新的CLI吗？您可以尝试重新安装node_modules吗？

— 莱

1

该错误必须在其他地方

— brijmcq

@LLai @angular/cli: 1.3.0 node: 6.11.2 npm: 5.3.0是否更改了.angular-cli.json中的部分，否则您不会在控制台中看到错误。

— cilerler '17

是的，我有您确切的脚本和样式。jquery@3.2.1 popper.js@1.11.1 bootstrap@4.0.0-beta

— Lla17年

我确定这将有多大帮助，但是您可以在此页面上查看这个问题，还有一个关于如何添加第三方库的问题

— Rahul Singh

223

查看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。苗条的 .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"
      ],

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

— 马丁·鲍尔
source

在jquery的packages.json中有什么？在我的node_modules jquery文件夹中，我没有jquery.slim.min.js。其实只是发现它的jQuery 3.2.1

— 吉姆Culverwell

2

我的package.json对于jquery如下所示：`“ jquery”：“ ^ 3.2.1”`我也用完整的jquery版本测试了它，它似乎也可以工作。似乎只有** umd ** / popper.min.js是必需的。

— Martin Bauer

2

这个答案有76个upvotes ...的开发给予了尖刻“RTFM” /接近Github的问题问同样的问题😂

— brandones

4

是否使用jQuery-slim无关紧要，但是使用popper.js的umd版本修复了它，谢谢！

— finstas

2

使用/dist/umd而不是/dist在popper依赖项中就可以了。谢谢。

— redent84 '18

50

我有同样的问题。我的解决方案不是导入dist文件夹（./node_modules/popper.js/dist/popper.js），而是导入umd文件夹（./node_modules/popper.js/dist/ umd /popper.js）。是否获得js文件的迷你版或普通版都没有关系。

— 比约恩·贝根海姆
source

3

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

ng-bootstrap提供了从头开始编写的本地 Angular指令。积极的结果是：*您不需要包括和担心jQuery，popper.js等。*指令提供了在Angular世界中“有意义”的API。

对于任何试图将Bootstrap 4.beta与Angular结合使用的人-ng-bootstrap刚刚发布了它的第一个Beta，它与Bootstrap 4.beta CSS完全兼容

— pkozlowski.opensource
source

如果您使用Angular会容易得多，但如果使用AngularJS则不会......

— El Mac

1

好吧，问题是关于Angular和angular-cli的，所以不确定为什么在这里提出了AngularJS ...

— pkozlowski.opensource

1

如果您在Asp.net中工作，Mvc umd也可以执行此操作。

如https://stackoverflow.com/a/50839939/8497522中所示，只需添加BundleConfig.cs：

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

除：

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

— 达米安·库雷克（Damian Kurek）
source

0

要运行模式，请在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"] 
}

— 马尼拉吉
source