我们想在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-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>

其他回答

现在有了新的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.

不管你使用的是哪种JS框架,通过以下2步将bootstrap导入到你的项目很容易:

使用npm i -S bootstrap或yarn add bootstrap安装bootstrap。

在styles.css或styles中。导入bootstrap为@import ` ~bootstrap/dist/css/bootstrap.min.css `。

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

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

添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

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

使用angular-cli和css的工作示例:

1.安装引导

NPM安装bootstrap tether jquery——保存

2.添加到.angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],