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

当前回答

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

其他回答

在相应的项目目录中打开终端/命令提示符，并键入以下命令。

npm install --save bootstrap

然后打开。angular-cli。json文件，查找

“风格”:( “styles”css ),

把它改成

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

全部完成。

2017-05-06 18:54:31

好消息!基本上，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，只需运行:

npm install @popperjs/core

参考

2020-12-31 10:57:07

第一次安装引导

npm i bootstrap

导入到angular中。json风格

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

2022-06-11 10:23:09

使用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

在bash中运行npm install ng2-bootstrap bootstrap——save 在angular-cli.json中添加/更改以下内容 “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.min.js”, “. . / node_modules /引导/ dist / js / bootstrap.min.js” ),

2016-10-18 00:58:05

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

推荐文章

最新文章

标签