我们想在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).
做以下几点:
npm i bootstrap@next --save
这将为您的项目添加引导4。
接下来进入src/style。SCSS或src/style.css文件(选择你正在使用的任何一个)并导入bootstrap:
对于style.css
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
对于style.scss
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
对于脚本，你仍然需要在angular-cli中添加文件。在Angular版本6中，这个编辑需要在Angular .json文件中完成:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
在项目中运行以下命令
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。
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来反映这些变化
