我们想在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).
现在有了新的ng-bootstrap 1.0.0-beta。5版本支持大多数基于Bootstrap的标记和CSS的原生Angular指令。
使用它所需的唯一依赖项是引导。不需要使用jquery和popper.js依赖。
ng-bootstrap是完全取代JavaScript实现的组件。所以你不需要在.angular-cli.json的scripts部分中包含bootstrap.min.js。
当你在angular-cli的最新版本中集成bootstrap和生成的项目时，请遵循以下步骤。
Inculde bootstrap.min.css in your .angular-cli.json, styles section.
"styles": [
"styles.scss",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Install ng-bootstrap dependency.
npm install --save @ng-bootstrap/ng-bootstrap
Add this to your main module class.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
Include the following in your main module imports section.
@NgModule({
imports: [NgbModule.forRoot(), ...],
})
Do the following also in your sub module(s) if you are going to use ng-bootstrap components inside those module classes.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [NgbModule, ...],
})
Now your project is ready to use available ng-bootstrap components.
更新v1.0.0-beta.26
你可以在文档中看到导入引导的新方法
如果仍然不工作，使用ng serve命令重新启动
1.0.0或以下版本:
在index.html文件中，你只需要引导css链接(不需要js脚本)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
And
npm install ng2-bootstrap --save
npm install moment --save
在my_project/src/system-config中安装ng2-bootstrap后。ts:
/** Map relative paths to URLs. */
const map: any = {
'moment': 'vendor/moment/moment.js',
'ng2-bootstrap': 'vendor/ng2-bootstrap'
};
/** User packages configuration. */
const packages: any = {
'ng2-bootstrap': {
defaultExtension: 'js'
},
'moment':{
format: 'cjs'
}
};
在my_project/angular-cli-build.js中:
module.exports = function (defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'ng2-bootstrap/**/*',
'moment/moment.js'
]
});
};
不要忘记这个命令
把你的模块放到供应商中:
ng build
从另一个模块导入相同的原理。
