Angular 4: 如何包含Bootstrap？

要在Angular中配置/集成/使用Bootstrap，首先需要使用npm安装Bootstrap包。

安装包

$ npm install bootstrap.0.0-alpha.6 --save // for specific version

或者

$ npm install bootstrap --save // for latest version

注意：--save命令将保存依赖关系在我们的Angular应用程序的package.json文件中。

现在我们已经安装了上述步骤中的包，现在我们可以通过以下任何一种或两种方式告诉Angular CLI需要加载这些样式：

选项1）添加到文件src/styles.css中

我们可以添加依赖项，如下所示：

"~bootstrap/dist/css/bootstrap.min.css";

选项2）添加到angular-cli.json或angular.json中

我们可以将样式CSS文件添加到位于我们Angular应用程序根文件夹的angular-cli.json或angular.json文件中，如下所示：

"styles": [

"../node_modules/bootstrap/dist/css/bootstrap.min.css",

"styles.css"

]

我本来想这样发布答案，但既然已经有了，我只会点赞。做得好先生。我只想补充一点，在最新版本的Angular 7中，没有angular-cli.json，而是angular.json。

在选项2中，对我有效的CSS路径是"./node_modules/bootstrap/dist/css/bootstrap.min.css"。

@ИгорРајачић，在json文件中应该在哪个级别添加它，请给一个示例链接？

angular-cli.json或angular.json文件位于我们Angular应用程序的根文件夹

问题：如何在Angular 4中包含Bootstrap？

原因：在Angular 4中，要使用Bootstrap，需要将Bootstrap的文件路径配置到项目中。

解决方法：

1) 在index.html文件中添加CDN链接

2) 使用npm安装Bootstrap，并在angular.json文件中设置路径（推荐）

3) 使用npm安装Bootstrap，并在index.html文件中设置路径

推荐使用第二种方法，即使用npm安装Bootstrap，因为它可以直接在项目目录中安装，并且可以轻松访问。

方法1：

在angular项目的index.html文件中添加Bootstrap、Jquery和popper.js的CDN路径。

方法2：

1) 使用npm安装Bootstrap

npm install bootstrap --save

安装完成后，还需要安装两个javascript包，即Jquery和Popper.js，因为Bootstrap 4使用了这两个包。

2) 安装JQUERY

npm install jquery --save

3) 安装Popper.js

npm install popper.js --save

现在，Bootstrap已经安装在项目目录的node_modules文件夹中。

打开angular.json文件，在其中的"styles[]"和"scripts[]"路径中添加Bootstrap、jquery和popper.js文件的路径。

方法3：

使用npm安装Bootstrap，然后在index.html文件中设置路径。

现在，Bootstrap已经成功安装并可以正常使用。

注意：如果使用的是Angular 6，.angular-cli.json文件已更名为angular.json，并且路径不再是"../node_modules..."，而是"node_modules/..."。

如果在angular.json中添加了Bootstrap的scripts路径，是否还需要在每个使用Bootstrap的地方添加"<link rel..."？

感谢提醒，我完全忘记在angular.json中添加scripts，不知道为什么jquery组件无法正常工作。谢谢你的提醒！

添加Bootstrap到angular.json中的scripts有什么作用？是否仍然需要在每个使用Bootstrap的地方添加"<link rel..."？

非常感谢，有很多资料都缺乏这方面的信息，特别是关于popper的部分。

Angular 4: 如何包含Bootstrap？

在Angular项目中包含Bootstrap的原因是为了能够使用Bootstrap提供的样式和组件来构建用户界面。为了实现这个目标，我们需要在项目中安装Bootstrap，并将其引入到项目的样式表中。

首先，在命令行中运行以下命令来安装Bootstrap：

npm install --save bootstrap

安装完成后，找到项目根目录下的angular-cli.json文件，在其中的"styles"数组中添加Bootstrap的CSS文件路径，如下所示：

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

注意：如果你使用的是Angular 6+版本，那么angular-cli.json文件已经改名为angular.json。

这样，我们就成功地将Bootstrap的样式表引入到了项目中。接下来，如果我们还需要使用Bootstrap的JavaScript和jQuery库，可以按照以下步骤来引入：

1. 打开angular-cli.json（或angular.json）文件；

2. 在"scripts"数组中添加引入Bootstrap的JavaScript文件的路径，如下所示：

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

需要注意的是，这里的路径是相对于index.html文件的路径。通常情况下，使用Angular CLI创建的项目中，index.html文件位于项目根目录的"src"目录下。如果你的项目结构有所不同，可以相应地调整路径。

另外，需要注意的是，通过上述方法安装的Bootstrap是最新版本的。如果需要使用其他版本的Bootstrap，只需替换上述命令中的"bootstrap"为对应的模块名称即可。

为了确保完整的功能性，你还需要将Bootstrap、Poper.js和jQuery库一起引入到项目中。具体方法可以参考这个Stack Overflow回答。

通过以上步骤，我们成功地将Bootstrap引入到了Angular项目中，并可以开始使用Bootstrap提供的样式和组件来构建用户界面了。希望这篇文章对你有所帮助！