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


当前回答

步骤1: NPM安装bootstrap@latest——save-dev 这将安装最新版本的引导程序, 但是,可以通过添加版本号来安装指定的版本

打开styles.css并添加以下内容 @ import " ~引导/ dist / css / bootstrap.css”

其他回答

你也可以观看Mike Brocchi的这段视频,其中有关于如何在Angular-Cli生成的项目中添加引导的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU(约13:00分)

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

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

只需在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>

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

安装引导 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”; 重新启动本地服务器