我们想在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).
更新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
从另一个模块导入相同的原理。
查找关键字>全局库安装
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项目自己的文档。
在项目中运行以下命令
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。
对于bootstrap 4.5, angular 10
npm install bootstrap --save
更新你的风格。这样的SCSS带有bootstrap import语句。
$theme-colors: (
"primary": #b867c6,
"secondary": #f3e5f5,
"success": #388e3c,
"info": #00acc1,
"light": #f3e5f5,
"dark": #863895
);
@import "~bootstrap";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
color: gray('800');
background-color: theme-color('light');
font-family: 'Raleway', sans-serif;
}
导入引导应该在变量覆盖之后。[这个例子还展示了如何放置自己的主题颜色。]
