如何添加引导到一个angular-cli项目

我们想在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和bootstrap，那么简单的答案将如下步骤: 1. 添加节点包引导作为开发依赖

npm install --save bootstrap

在angular中导入引导样式表。json文件。 “风格”:( “项目/ app / src / styles.scss”, ”。/ node_modules /引导/ dist / css / bootstrap.min.css” ), 你已经准备好使用bootstrap进行样式化、网格化等。 >我的第一个bootstrap div</div>

我发现最好的部分是我们使用引导，没有任何第三方模块依赖。只要更新npm install——save bootstrap@4.4等命令，我们就可以随时升级引导程序。

2019-12-23 08:48:30

其他回答

你有很多方法可以在你的Angular项目中添加Bootstrap 4:

在你的Angular项目的index.html文件中包含引导CSS和JavaScript文件，用@import关键字导入Angular项目的全局styles.css文件中的Bootstrap CSS文件。在angular的styles和scripts数组中添加Bootstrap CSS和JavaScript文件。项目的Json文件

2020-02-05 23:14:43

好消息!基本上，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

参考

2020-12-31 10:57:07

2个简单步骤

安装引导程序(正在安装最新版本)

npm install bootstrap@next

导入到你的项目中，在你的styles.scss中添加下面这行

@import '~bootstrap';

请注意您的导入顺序可能会有影响，如果您有其他库使用bootstrap，请将此import语句放在顶部

最后。：）

注:以下是我的版本

Angular: 9

节点:v10.16.0

NPM: 6.9.1

2020-07-27 12:06:27

请执行以下步骤:

NPM install -save bootstrap 在你的。angular-cli中。添加到样式部分:

"styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css"， "styles.css"]

之后，必须重新启动ng服务

享受

2017-09-11 00:17:09

安装引导 NPM安装bootstrap@next 在.angular-cli.json中添加代码: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.js”, “. . / node_modules /范围/ dist / js / tether.js”, “. . / node_modules /引导/ dist / js / bootstrap.js” ), 最后将bootstrap.css添加到代码style.scss中 @ import " . . / node_modules /引导/ dist / css / bootstrap.min.css”; 重新启动本地服务器

2017-04-25 06:27:29

如何添加引导到一个angular-cli项目

推荐文章

最新文章

标签