首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap4依赖PopperJs在角度上抛出错误

Bootstrap4依赖PopperJs在角度上抛出错误
EN

Stack Overflow用户
提问于 2017-08-12 11:05:04
回答 6查看 42.6K关注 0票数 96

我刚刚创建了一个全新的angular-cli项目

并运行npm install bootstrap@4.0.0-beta jquery popper.js --save

并更改了.angular-cli.json's相关部分,如下所示

  "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

你知道怎么修复它吗?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2017-08-12 19:23:12

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

在那之后,它现在似乎起作用了。

票数 227
EN

Stack Overflow用户

发布于 2017-10-06 22:30:22

我也有同样的问题。我的解决方案是导入umd文件夹,而不是导入dist文件夹(./_/popper.js/dist/popper.js)无论您获得的是js-file的迷你版本还是普通版本。

票数 52
EN

Stack Overflow用户

发布于 2017-08-12 14:34:36

我可以看到很多人都在努力添加并正确地包含Bootstrap4依赖项(jQuery、popper.js等)。但是有一个更简单的解决方案,那就是https://ng-bootstrap.github.io

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

对于任何试图使用带Angular - ng-bootstrap的Bootstrap 4.beta的人来说,刚刚发布了它的第一个测试版,它与Bootstrap 4.beta CSS完全兼容

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45646101

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档