一些引导功能在 Angular 中不起作用，但在常规 HTML 文件中可以

Question

我刚刚进入Angular和Bootstrap。我构建了一个 Angular 项目，然后在事后向其添加了引导程序(npm install bootstrap)，然后在其中一个 html 页面上尝试了各种引导功能。其中一些有效，有些则无效。

此问题的答案中的代码，例如：可消除警报。将显示警报，但是当我单击 X 时，它不会消失。奇怪的是，如果我直接在浏览器中访问完全相同的HTML文件，而不是通过提供的Angular页面，该功能可以正常工作。

那么我在哪里安装了错误的东西？ 以下是我根据互联网上的各种提示所做的一些尝试： 这是我的angular.json的相关部分：

"styles": [
"node_modules/jquery/dist/jquery.js",
//"node_modules/tether/dist/js/popper.js",
"src/styles.scss",
{
"input": "./node_modules/bootstrap/dist/css/bootstrap.css"
}
],

我的样式.css包含：

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
@import "~bootstrap/dist/css/bootstrap.css";

Answer 1

在

1. scripts属性中导入 JavaScript 文件，而不是在styles属性中导入。

...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...

2. 不要导入两次CSS文件。

@import "~bootstrap/dist/css/bootstrap.css";