angular 2 cli 下使用 ng-bootstrap
angular 2 cli 下使用 ng-bootstrap
十万猛虎下画山 发表于8个月前
angular 2 cli 下使用 ng-bootstrap
  • 发表于 8个月前
  • 阅读 24
  • 收藏 0
  • 点赞 0
  • 评论 0


摘要: 原文链接

地址 需要翻墙:


This repository contains a set of native Angular directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • Angular (requires Angular version 4 or higher, tested with 4.0.3)
  • Bootstrap CSS (tested with 4.0.0-beta
  • Bootstrap要单独安装妈蛋的。
  • npm install bootstrap@4.0.0-beta
  • 我说一直报错找不到css呢,css要放在angular-cli.json的style中 )
     "styles": [


Should I add bootstrap.js or bootstrap.min.js to my project?

No, the goal of ng-bootstrap is to  completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.

Supported browsers

We strive to support the same browsers and versions as supported by both Bootstrap 4 and Angular, whichever is more restrictive. Check browser support notes for Angular and Bootstrap.

Our code is automatically tested on all the supported browsers.


After installing the above dependencies, install ng-bootstrap via: 

npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import our main module.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

The only remaining part is to list the imported module in your root module and any additional application modules that make use of the components in this library. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
export class AppModule {

Other modules in your application can simply import NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
export class OtherModule {
标签: angular angular cli
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 71
码字总数 35146
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
* 支付类型