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

当前回答

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

其他回答

将此添加到styles.css文件中

@import "~bootstrap/dist/css/bootstrap.css";

2020-08-08 04:39:52

添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

运行此命令后，请继续检查您的node_modules文件夹，您应该能够看到bootstrap和jquery添加到其中。

2019-06-12 05:53:50

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

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

2020年8月更新:Angular 10

“如果你有一个Angular≥9的CLI项目，你可以简单地使用我们的原理图来添加ng-bootstrap库。”只需在项目文件夹中运行以下命令。所有配置都会自动添加。

的添加@ng-bootstrap/of-bootstrap

ng s

示例代码片段:

import {Component} from '@angular/core';

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

< p > < ngb-alert(驳回)= " false " > < >强警告!你最好检查一下自己，你看起来不太好。 < / ngb-alert > < / p >

2020-08-22 00:38:58

我发现很多解决方案在新版本的Angular-CLI中不再适用了。

您可以尝试在app.component.html的顶部添加以下链接标记，并在底部添加脚本标记。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

但是如果你想使用ngx-bootstrap，那么在你的项目目录下运行下面的命令

ng add ngx-bootstrap

使用以下内容作为app.component.html的内容进行测试

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

2020-06-27 16:06:58

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

推荐文章

最新文章

标签