我们想在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).


当前回答

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

这似乎是迄今为止最一致的行为

其他回答

Install bootstrap using npm i --save bootstrap@version.Now,go to nodemodules folder and from bootstrap folder copy the path of 'bootstrap.min.css.js' and paste the full path(like nodemodules/bootstrap/css/bootstrap.min.css.js) in angular.json under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you'll find a part of the window gets opened,now go to elements tab open head tag and if you see bootstrap in style tag,then your installation is successful.

2020年8月更新:Angular 10

“如果你有一个Angular≥9的CLI项目,你可以简单地使用我们的原理图来添加ng-bootstrap库。”只需在项目文件夹中运行以下命令。所有配置都会自动添加。

的添加@ng-bootstrap/of-bootstrap

ng s

示例代码片段:

import {Component} from '@angular/core';

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

< p > < ngb-alert(驳回)= " false " > < >强警告!你最好检查一下自己,你看起来不太好。 < / ngb-alert > < / p >

查找关键字>全局库安装 https://github.com/angular/angular-cli会帮助你找到答案。

根据他们的文档,您可以执行以下步骤来添加Bootstrap库。

首先,从npm安装Bootstrap:

npm install bootstrap

然后将所需的脚本文件添加到应用程序[0]中。angular中的脚本。json文件:

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

以上步骤对于某些功能(如显示下拉菜单)的工作很重要。

最后将Bootstrap CSS文件添加到应用程序[0]。样式数组。json文件:

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

如果您正在运行ng service,则重新启动ng service,否则更改将不可见。Bootstrap 4+现在应该在你的应用程序上工作。

可选择的解决方案: 将Bootstrap添加到Angular的另一个解决方案是使用ngx-bootstrap项目,该项目提供了由Angular支持的Bootstrap组件。请查看这个答案,了解更多关于在Angular中使用ngx-bootstrap或ngx-bootstrap项目自己的文档。

我发现很多解决方案在新版本的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>

将此添加到styles.css文件中

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