5

如何添加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
4

2 回答 2

5

是的，您必须通过在文件中引用 vendorNpmFiles 来添加所有 cssangular-cli-build.js文件首先转到项目目录并键入

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'
  }
};
于 2016-07-16T16:36:29.240 回答
2

是的，上面的@pd farhad 回答得很好，但我想对此给出一些解释，

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

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

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

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

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

我必须添加打字吗？

没那么强制。

希望这更清楚！

于 2016-07-16T20:26:19.640 回答