如何添加引导到一个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).

当前回答

只需在index.html的Head标签中添加这三行

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2018-11-03 07:27:17

其他回答

Install bootstrap using npm i --save bootstrap@version.Now,go to nodemodules folder and from bootstrap folder copy the path of 'bootstrap.min.css.js' and paste the full path(like nodemodules/bootstrap/css/bootstrap.min.css.js) in angular.json under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you'll find a part of the window gets opened,now go to elements tab open head tag and if you see bootstrap in style tag,then your installation is successful.

2018-07-30 12:11: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安装引导程序

npm install boostrap@next --save

然后检查你的node_modules文件夹中的boostrap.css文件(在dist内)，通常路径是

"../node_modules/bootstrap/dist/css/bootstrap.css",

在style.css或style.scss中添加此路径| import boostrap

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

就是这样。

2017-10-28 17:29:47

查找关键字>全局库安装 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项目自己的文档。

2016-09-26 02:09:43

首先，你必须用这些命令安装tether, jquery和bootstrap

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4

在你的angular-cli中添加这些行。json(角。Json从版本6起)文件

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

2016-10-01 17:18:38

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

推荐文章

最新文章

标签