我们想在angular-cli 1.0.0-beta.5生成的应用程序中使用bootstrap 4 (4.0.0-alpha.2)(w/ node v6.1.0)。
在获得bootstrap及其对npm的依赖之后，我们的第一个方法是将它们添加到angular-cli-build.js中:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
然后导入到index。html中
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
这在ng serve中工作得很好，但当我们生成一个带有-prod标志的构建时，dist/vendor中的所有依赖项都消失了(惊讶!)
我们打算如何处理这样的场景(即加载引导脚本)在一个用angular-cli生成的项目?
我们有以下想法，但我们真的不知道该怎么做……
use a CDN ? but we would rather serve these files to guarantee that they will be available
copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?
adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).
好消息!基本上，Bootstrap 5现在可以很容易地实现，甚至不需要jQuery。
从您的终端运行
npm install bootstrap@next --save
因此，Angular在你的app.module中使用webpack。Ts，只要加上:
import "bootstrap";
或者如果你想分别导入它们，可以这样做:
import { ModuleToBeImported } from 'bootstrap';
然后是你的风格。scss,添加:
@import '~bootstrap/scss/bootstrap';
基本上就是这样，但是要注意一些组件需要popper.js。
需要bootstrap js的组件
在这里你也会看到依赖于popper.js的组件，在编写本文时，它们是用于显示和定位的下拉菜单，以及用于显示和定位的工具提示和弹出窗口。
因此，要安装popper.js，只需运行:
npm install @popperjs/core
参考
由于这变得如此令人困惑，这里的答案完全是混合的，我只是建议与官方ui团队为BS4回购(是的，NG-Bootstrap有很多这样的回购。
只需按照此处的说明https://github.com/ng-bootstrap/ng-bootstrap获取BS4。
摘自图书馆:
这个库是由ui-bootstrap团队从头构建的。我们
正在使用TypeScript并瞄准Bootstrap 4 CSS框架。
与Bootstrap 4一样，这个库正在进行中。请检查
列出我们的问题列表，以查看我们正在实现的所有事情。感觉
在那里可以自由发表评论。
只是为了它的目的而复制粘贴:
npm install --save @ng-bootstrap/ng-bootstrap
安装完成后，你需要导入我们的主模块:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
剩下的惟一部分是在应用程序模块中列出导入的模块。对于根模块(顶级)，确切的方法会略有不同，你最终应该得到类似于(注意NgbModule.forRoot())的代码:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
应用程序中的其他模块可以简单地导入NgbModule:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...],
})
export class OtherModule {
}
这似乎是迄今为止最一致的行为
在项目中运行以下命令
npm install --save @bootsrap@4
如果你得到这样的确认
+ bootstrap@4.1.3
updated 1 package in 8.245s
说明boostrap 4安装成功。然而，为了使用它，你需要更新angular. properties下的“styles”数组。json文件。
按以下方式更新它，以便引导能够覆盖现有的样式
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
为了确保一切都正确设置，运行ng serve >在http://localhost:4200/或一个端口上打开浏览器，运行angular应用>，右键单击>，检查>在头部检查样式，如果你有如下所示的引导，那么你可以使用boostrap。
