angular - 如何将 ng-bootstrap 添加到 Angular-CLI(Broccoli 版本)项目中？

Question

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

更具体地说:

1. 我应该如何将压缩后的 .css 从我的 node_modules 文件夹添加到我的 angular-cli 项目中？
2. 我必须将它添加到 angular-cli-build.js 吗？
3. 我必须添加类型吗？
4. 我必须将它添加到 /src/system-config.ts

Answer 1

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

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

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

 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，写入

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'
  }
};