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


当前回答

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 >

其他回答

试试这个

npm install bootstrap@next

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

重要更新: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'
  }
};

好消息!基本上,Bootstrap 5现在可以很容易地实现,甚至不需要jQuery。 从您的终端运行

npm install bootstrap@next --save

因此,Angular在你的app.module中使用webpack。Ts,只要加上:

import "bootstrap";

或者如果你想分别导入它们,可以这样做:

import { ModuleToBeImported } from 'bootstrap';

然后是你的风格。scss,添加:

@import '~bootstrap/scss/bootstrap';

基本上就是这样,但是要注意一些组件需要popper.js。 需要bootstrap js的组件 在这里你也会看到依赖于popper.js的组件,在编写本文时,它们是用于显示和定位的下拉菜单,以及用于显示和定位的工具提示和弹出窗口。

因此,要安装popper.js,只需运行:

npm install @popperjs/core

参考

更新v1.0.0-beta.26

你可以在文档中看到导入引导的新方法

如果仍然不工作,使用ng serve命令重新启动

1.0.0或以下版本:

在index.html文件中,你只需要引导css链接(不需要js脚本)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

And

npm install ng2-bootstrap --save
npm install moment --save

在my_project/src/system-config中安装ng2-bootstrap后。ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

在my_project/angular-cli-build.js中:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

不要忘记这个命令 把你的模块放到供应商中:

ng build

从另一个模块导入相同的原理。

在项目中运行以下命令

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。