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


当前回答

Install bootstrap using npm i --save bootstrap@version.Now,go to nodemodules folder and from bootstrap folder copy the path of 'bootstrap.min.css.js' and paste the full path(like nodemodules/bootstrap/css/bootstrap.min.css.js) in angular.json under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you'll find a part of the window gets opened,now go to elements tab open head tag and if you see bootstrap in style tag,then your installation is successful.

其他回答

做以下几点:

npm i bootstrap@next --save

这将为您的项目添加引导4。

接下来进入src/style。SCSS或src/style.css文件(选择你正在使用的任何一个)并导入bootstrap:

对于style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

对于脚本,你仍然需要在angular-cli中添加文件。在Angular版本6中,这个编辑需要在Angular .json文件中完成:

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

请执行以下步骤:

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

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

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

享受

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

就是这样。

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

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