我发现很多解决方案在新版本的Angular-CLI中不再适用了。

您可以尝试在app.component.html的顶部添加以下链接标记，并在底部添加脚本标记。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

但是如果你想使用ngx-bootstrap，那么在你的项目目录下运行下面的命令

ng add ngx-bootstrap

使用以下内容作为app.component.html的内容进行测试

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

执行该命令

npm install bootstrap@3

你Angular.json

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

由于这变得如此令人困惑，这里的答案完全是混合的，我只是建议与官方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 bootstrap

然后我们需要导入Bootstrap Sass到我们的应用程序中。在风格。SCSS添加这一行:

@ import“. . / node_modules /引导/ scss / bootstrap.scss”;

欲了解更多信息…

Angular 5中引导4的步骤

创建Angular 5项目 ng新的AngularBootstrapTest 移动到项目目录 cd AngularBootstrapTest 下载引导 NPM安装引导 添加引导到项目 4.1打开.angular-cli.json 4.2在json中找到“styles”部分 4.3添加bootstrap CSS路径如下所示 ． “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css”, “styles”css ),

现在你已经成功地在angular 5项目中添加了bootstrap css

测试引导

src / app / app.component.html开放 添加引导按钮组件

.

<button type="button" class="btn btn-primary">Primary</button>

你可以参考按钮的样式在这里(https://getbootstrap.com/docs/4.0/components/buttons/)

保存文件 运行项目 发球——开球

现在，您将在页面中看到引导样式按钮

注意: 如果你在ng serve之后添加了引导路径，你必须停止并重新运行ng serve来反映这些变化

试试这个

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation