如何在 Angular 4 应用程序中安装 bootstrap 4 版本 beta.2？答案

【问题标题】：How to install bootstrap 4 version beta.2 in an angular 4 application?如何在 Angular 4 应用程序中安装 bootstrap 4 版本 beta.2？
【发布时间】：2018-06-07 14:30:18
【问题描述】：

我尝试安装 bootstrap 4 版本 beta.2 及其依赖项（jquery 和 popper.js）。但是发生了一些非常奇怪的事情。出于某种原因，我在控制台中不断收到一条错误消息，说“SyntaxError：导出声明可能只出现在模块的顶层”。当我单击转到导致 scripts.bundle.js 中此问题的行时，我发现导致此问题的是 popper.js 包。

我已将脚本引用包含在我的 angular-cli.json 文件中，如下所示：

 "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/popper.js/dist/esm/popper.min.js",   
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/alertifyjs/build/alertify.min.js"
  ]

我认为我做的一切都是正确的，但我不知道为什么会出现 popper 的问题。

请帮我找到答案。

【问题讨论】：

是的，这是一个已知问题。目前的修复是使用 umd/popper.min.js 选项。如果你寻找 bs4 + popperjs，你会发现数百个结果
谢谢！！。为我解决了这个问题。但是，现在控制台中有一条新消息，显示“源映射错误：请求失败，状态为 404 资源 URL：localhost:4200/scripts.bundle.js 源映射 URL：bootstrap.min.js.map”。这会是个问题吗？
我认为这是一个 systemjs 配置错误，准确缩小范围有点复杂，但 404 提示它是路径问题。

标签： jquery angular typescript bootstrap-4 popper.js

【解决方案1】：

如果您正在运行 Angular CLI。然后使用

npm install ngx-bootstrap --save

财政年度：Bootstrap 4 in Angular CLI

【讨论】：