Bootstrap 在 Angular 6 应用程序中不起作用答案

【问题标题】：Bootstrap not working in Angular 6 appBootstrap 在 Angular 6 应用程序中不起作用
【发布时间】：2019-01-23 00:29:36
【问题描述】：

我想在 Angular 6 应用程序中使用 Bootstrap，这是我到目前为止所做的，但似乎没有任何效果：

1) 使用 npm 安装 bootstrap、jquery 和 popper.js。 2）在Angular.json文件中输入以下内容

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/scss/bootstrap.scss"
],
"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"
    ...
]

我是不是错过了什么。这似乎行不通。

【问题讨论】：

您可以在 Angular.json 文件中修复问题，例如 fix bootstrap in angular.json

标签： jquery angular twitter-bootstrap bootstrap-4 angular6

【解决方案1】：

在您的 style.scss 文件中使用 import

@import "node_modules/bootstrap/scss/bootstrap.scss"

并从angular.json 文件中删除"node_modules/bootstrap/scss/bootstrap.scss"

【讨论】：

告诉我更多帮助
像魅力一样工作。谢谢
乐于助人:)
看这里：stackoverflow.com/questions/50559810/…
是的，它正在工作，但是当我尝试打开一个模式时，它不会关闭并占用整个页面。请帮助我。谢谢

【解决方案2】：

首先将引导程序安装到应用程序：

npm install bootstrap@latest --save (flag is optional)

然后将 bootstrap 导入 Angular 中的 index.html 文件：

@import '~bootstrap/css/bootstrap.css'; (~ means the node_Modules)

我希望这能回答你的问题。

【讨论】：