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

angular-cli Webpack

蛋蛋猿

2020-03-23

我刚刚创建了一个全新的项目，
然后运行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

任何想法如何解决？

第2686篇《Bootstrap4依赖项PopperJs在Angular上引发错误》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
LEY小宇宙 2020.03.23

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

猪猪A 2020.03.23

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

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

老丝阳光 2020.03.23

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

我可以看到许多人都在努力添加和正确包含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完全兼容

蛋蛋猿 2020.03.23

如果您在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"));

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android