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

其他回答

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

首先,你必须用这些命令安装tether, jquery和bootstrap

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

在你的angular-cli中添加这些行。json(角。Json从版本6起)文件

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

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

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 >

重要更新:ng2-bootstrap现在被ngx-bootstrap取代

ngx-bootstrap同时支持Angular 3和Angular 4。

更新:1.0.0-beta。11-webpack或以上版本

首先,在终端中使用以下命令检查你的angular-cli版本:

ng -v

如果你的angular-cli版本大于1.0.0-beta。11-webpack,那么你应该按照这些步骤:

安装ngx-bootstrap和bootstrap: NPM安装ngx-bootstrap——保存

这一行现在安装Bootstrap 3,但是将来可以安装Bootstrap 4。请记住,ngx-bootstrap支持这两个版本。

src / app / app.module开放。Ts和添加: import {AlertModule} from 'ngx-bootstrap'; ... @NgModule ({ ... import: [AlertModule.forRoot(),…), ... }) angular-cli开放。Json(对于angar6及以后的文件名称更改为angular. Json。Json),然后在styles数组中插入一个新条目: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), 打开src/app/ app.ponent .html,添加: <警报类型=“成功”> < /警报>你好

1.0.0-beta。10个或以下版本:

如果你的angular-cli版本是1.0.0-beta。10或以下,则可以使用以下步骤。

首先,进入项目目录并键入:

npm install ngx-bootstrap --save

然后,打开angular-cli-build.js并添加这一行:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在,打开src/system-config。然后写:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

,:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};