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

当前回答

使用npm安装引导程序 NPM安装引导

2.安装Popper.js

npm install --save popper.js

3.转向角。Angular 6 project / . Angular -cli. json。在Angular 5中添加json，并添加列出的:

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

2018-05-06 16:51:30

其他回答

在项目中运行以下命令

npm install --save @bootsrap@4

如果你得到这样的确认

+ bootstrap@4.1.3
updated 1 package in 8.245s

说明boostrap 4安装成功。然而，为了使用它，你需要更新angular. properties下的“styles”数组。json文件。

按以下方式更新它，以便引导能够覆盖现有的样式

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

为了确保一切都正确设置，运行ng serve >在http://localhost:4200/或一个端口上打开浏览器，运行angular应用>，右键单击>，检查>在头部检查样式，如果你有如下所示的引导，那么你可以使用boostrap。

2018-08-17 12:05:30

请执行以下步骤:

NPM install -save bootstrap 在你的。angular-cli中。添加到样式部分:

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

之后，必须重新启动ng服务

享受

2017-09-11 00:17:09

没看到这个:

@import 'bootstrap/scss/bootstrap.scss';

我只是在style。scss中添加了这一行在我的情况下，我也想覆盖引导变量。

2019-06-11 12:57:48

试试这个

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

2017-01-10 19:38:23

添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

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

2019-06-12 05:53:50

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

推荐文章

最新文章

标签