【问题标题】：Bootstrap 4 dropdown breaks when importing bootstrap in Angular 7在 Angular 7 中导入引导程序时，引导程序 4 下拉菜单中断
【发布时间】：2019-06-21 18:07:55
【问题描述】：

我在 Angular 7 应用程序中遇到了这个问题。我无法使用纯 Bootstrap CSS/JS 和 Popper.js 重现它。

我正在尝试使用 vanilla Bootstrap JS 和 jQuery，因为我需要 Bootstrap 的 toast，而其他库（ng-bootstrap 和 ngx-bootstrap）目前不支持 toast。

最小（非）工作示例

https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue

使用npm run start 运行它

指向 Popper.js 存储库中问题的链接

我试图问开发者，但他一无所知：https://github.com/FezVrasta/popper.js/issues/748

重现问题的步骤

用例子重现：

npm i -g @angular/cli
git clone https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue.git
cd angular-bootstrap4-dropdown-issue
npm i
ng serve

从头开始复制：

使用 ng-cli 创建 Angular 应用
安装引导程序和引导程序类型：
- npm install --save bootstrap @types/bootstrap。
- @types/bootstrap 需要 popper.js 作为依赖项。
包括 Bootstrap 4 CSS 和 JS 文件
包含 Popper JS UMD 文件
在某处添加 import 'bootstrap'; 以告诉 typescript jQuery .tooltip() 函数存在
尝试在导航栏中使用 Bootstrap 4 下拉菜单

来自angular.json的相关摘录：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/js/dist/util.js",
  "node_modules/bootstrap/js/dist/alert.js",
  "node_modules/bootstrap/js/dist/button.js",
  "node_modules/bootstrap/js/dist/carousel.js",
  "node_modules/bootstrap/js/dist/collapse.js",
  "node_modules/bootstrap/js/dist/dropdown.js",
  "node_modules/bootstrap/js/dist/modal.js",
  "node_modules/bootstrap/js/dist/scrollspy.js",
  "node_modules/bootstrap/js/dist/tab.js",
  "node_modules/bootstrap/js/dist/toast.js",
  "node_modules/bootstrap/js/dist/tooltip.js",
  "node_modules/bootstrap/js/dist/popover.js"
]

预期的行为是什么？

下拉菜单应该切换

出了什么问题？

下拉菜单根本不切换

我试图在我的angular.json 文件中包含 Popper ESM 文件。现在一切正常，除了控制台出现错误。

Uncaught SyntaxError: Unexpected token export

我错过了什么吗？

编辑

似乎main.ts 中的这条语句打破了下拉列表：

import 'bootstrap';

但是，如果我删除它，当我想做一些 Bootstrap jQuery （例如显示 toast 或工具提示）时，Typescript 会尖叫：

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
});

【问题讨论】：

您可以使用 Angular 实现的 Bootstrap 让您的生活更轻松，例如 ng-bootstrap。
你能解释一下为什么你试图在 Angular 中使用 Bootstrap JS + jQuery（和相关模块），而不是使用专门设计/开发的库中的组件/指令/模块，例如 ng-bootstrap使用 Angular 生命周期/渲染？你会在尝试使用原始 Bootstrap/jQuery 时遇到各种问题，因为渲染在 Angular 等框架中的工作方式完全不同。
ng-bootstrap 和 ngx-bootstrap 没有 toasts，这是我在应用程序的另一部分需要的，这就是我使用 vanilla Bootstrap JS + jQuery 的原因。我将这个添加到问题中。
让我们continue this discussion in chat。
已编辑问题提及import 'bootstrap';

标签： angular bootstrap-4 popper.js

【解决方案1】：

您在这里遇到的问题是因为打字稿编译器。为了避免这种情况，您可以在基本 JS 文件中初始化工具提示和其他元素。您将需要导入此文件，因此在资产文件夹中创建它（并将其链接到您的index.html）或在另一个位置并在您的angular.json 的scripts 部分中提及它。

要初始化工具提示，这个 JS 文件的内容是：

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
});

这将在文档准备好时初始化所有工具提示。

如果您想在 Angular 流程中的特定时刻执行此操作，请将调用包装在一个函数中，如下所示：

function tooltip() {
  $(() => {
    $('[data-toggle="tooltip"]').tooltip()
  })
}

要在 Typescript 文件中调用它，您需要首先声明该函数。例如，初始化ngOnInit() 中的工具提示：

declare function tooltip();
ngOnInit() {
  tooltip();
}

这样你就不需要在任何地方import 'bootstrap';，所以你不会破坏你的其他组件。

【讨论】：

【解决方案2】：

我正在使用最新版本的 angular-cli。

首先，下载my Github project 并在cmd 中运行npm install（这样所有依赖项都会添加到您的系统中），然后运行ng-serve，这将导航到http://localhost:4200/。

如果你这样做了，你的问题就解决了。

如果你想在你的项目中使用jquery-syntex。

在cmd中输入此命令

npm install jquery --save 
npm install @types/jquery --save

并在您的 app.component.ts 中添加此语法

import $ from 'jquery';

第二个问题

如果您想在设备上使用tooltip，请使用ngx-bootstrap。