Question

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

更具体地说：

如何将.css文件夹中的缩小node_modules添加到我的angular-cli项目中？
我是否必须将其添加到angular-cli-build.js？
我是否需要添加打字？
我是否必须将其添加到/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'
  }
};

Answer 2

上面的@pd farhad很好地回答了，但我想对那个解释一下，

实际上，如果你必须在 angular CLI 中添加一些第三方库，那么你必须在 angular-cli-build.js 中添加第三方库引用文件，因为angular cli从供应商文件夹而不是node_modules文件夹中获取所有文件，因此每当您在cli-build文件中添加库的条目（例如在您的情况下为ng-bootstrap）时。它将在angular cli的vendor文件夹中复制该库。我们的项目可以使用。所以

如何将我的node_modules文件夹中的缩小的.css添加到我的angular-cli项目中？

您必须在system-cli-build.js文件中提供该文件/库的引用才能进入供应商文件夹。

我是否必须将其添加到angular-cli-build.js

是的，如果它是一个库，它是强制性的，但是如果只是单个文件，那么你也可以将该文件放到公共文件夹中。它取决于你。

我是否必须添加打字？

没那么强制。

希望这更清楚！

如何将ng-bootstrap添加到Angular-CLI（Broccoli版本）项目中？

2 个答案: