如何将ng-bootstrap添加到Angular-CLI(Broccoli版本)项目中? [英] How to add ng-bootstrap to an Angular-CLI (Broccoli version) project?

问题描述

如何将ng-bootstrap(由angular-ui团队编写)添加到Angular-CLI(Angular2 RC4)项目中?

How to add ng-bootstrap (by written by the angular-ui team) to an Angular-CLI (Angular2 RC4) project?

更具体地说:

1. 如何将我的node_modules文件夹中的缩小版.css添加到我的angular-cli项目中?
2. 我是否必须将其添加到angular-cli-build.js?
3. 我必须添加类型吗?
4. 我是否必须将其添加到/src/system-config.ts

1. How should I add the minified .css from my node_modules folder to my angular-cli project?
2. Do I have to add it to angular-cli-build.js?
3. Do I have to add the typings?
4. Do I have to add it to /src/system-config.ts

推荐答案

是的，您必须通过引用angular-cli-build.js文件中的vendorNpmFiles来添加所有css文件 首先进入项目目录并输入

Yes you have to add all of your css files by referencing from vendorNpmFiles in angular-cli-build.js file First go to the project directory and type

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

然后打开您的angular-cli-build.js并添加此行

then open your angular-cli-build.js and add this line

 vendorNpmFiles: [
  'systemjs/dist/system-polyfills.js',
  'systemjs/dist/system.src.js',
  'zone.js/dist/**/*.+(js|js.map)',
  'es6-shim/es6-shim.js',
  'reflect-metadata/**/*.+(ts|js|js.map)',
  'rxjs/**/*.+(js|js.map)',
  '@angular/**/*.+(js|js.map)',
  'angularfire2/**/*.js',
  'firebase/*.js',
  '@ng-bootstrap/ng-bootstrap/**/*.+(js|js.map)'
]

现在打开您的src/system-config.ts，写

now open your src/system-config.ts, write

const map: any = {
  '@ng-bootstrap/ng-bootstrap': 'vendor/@ng-bootstrap/ng-bootstrap'
};

和

const packages: any = {
  '@ng-bootstrap/ng-bootstrap': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/accordion': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/alert': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/buttons': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/carousel': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/collapse': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/dropdown': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/pagination': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/popover': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/progressbar': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/rating': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/tabset': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/timepicker': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/tooltip': {
    defaultExtension: 'js',
    main: 'index.js'
  },
  '@ng-bootstrap/ng-bootstrap/typeahead': {
    defaultExtension: 'js',
    main: 'index.js'
  }
};

这篇关于如何将ng-bootstrap添加到Angular-CLI(Broccoli版本)项目中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！