我们想在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).
重要更新:ng2-bootstrap现在被ngx-bootstrap取代
ngx-bootstrap同时支持Angular 3和Angular 4。
更新:1.0.0-beta。11-webpack或以上版本
首先，在终端中使用以下命令检查你的angular-cli版本:
ng -v
如果你的angular-cli版本大于1.0.0-beta。11-webpack，那么你应该按照这些步骤:
安装ngx-bootstrap和bootstrap:
NPM安装ngx-bootstrap——保存
这一行现在安装Bootstrap 3，但是将来可以安装Bootstrap 4。请记住，ngx-bootstrap支持这两个版本。
src / app / app.module开放。Ts和添加:
import {AlertModule} from 'ngx-bootstrap';
.．.
@NgModule ({
.．.
import: [AlertModule.forRoot()，…),
.．.
})
angular-cli开放。Json(对于angar6及以后的文件名称更改为angular. Json。Json)，然后在styles数组中插入一个新条目:
“风格”:(
“styles”css,
“. . / node_modules /引导/ dist / css / bootstrap.min.css”
),
打开src/app/ app.ponent .html，添加:
<警报类型=“成功”> < /警报>你好
1.0.0-beta。10个或以下版本:
如果你的angular-cli版本是1.0.0-beta。10或以下，则可以使用以下步骤。
首先，进入项目目录并键入:
npm install ngx-bootstrap --save
然后，打开angular-cli-build.js并添加这一行:
vendorNpmFiles: [
...
'ngx-bootstrap/**/*.js',
...
]
现在，打开src/system-config。然后写:
const map:any = {
...
'ngx-bootstrap': 'vendor/ngx-bootstrap',
...
}
,:
const packages: any = {
'ngx-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ngx-bootstrap.js'
}
};
由于这变得如此令人困惑，这里的答案完全是混合的，我只是建议与官方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 {
}
这似乎是迄今为止最一致的行为
