我们想在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).
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来反映这些变化
好消息!基本上,Bootstrap 5现在可以很容易地实现,甚至不需要jQuery。
从您的终端运行
npm install bootstrap@next --save
因此,Angular在你的app.module中使用webpack。Ts,只要加上:
import "bootstrap";
或者如果你想分别导入它们,可以这样做:
import { ModuleToBeImported } from 'bootstrap';
然后是你的风格。scss,添加:
@import '~bootstrap/scss/bootstrap';
基本上就是这样,但是要注意一些组件需要popper.js。
需要bootstrap js的组件
在这里你也会看到依赖于popper.js的组件,在编写本文时,它们是用于显示和定位的下拉菜单,以及用于显示和定位的工具提示和弹出窗口。
因此,要安装popper.js,只需运行:
npm install @popperjs/core
参考
查找关键字>全局库安装
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项目自己的文档。
我猜上面的方法在发布后已经改变了,看看这个链接
https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md
启动项目
npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap
安装ng-bootstrap和bootstrap
npm install ng2-bootstrap bootstrap --save
src / app / app.module开放。Ts和add
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...
@NgModule({
...
imports: [AlertModule, ... ],
...
})
angular-cli开放。并在样式数组中插入一个新条目
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
打开src/app/app.component.html并通过添加测试所有工作
<alert type="success">hello</alert>
现在有了新的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.