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

发布时间：2020-12-18 00:14:24 所属栏目：安全来源：网络整理

导读：如何将ng-bootstrap(由angular-ui团队编写)添加到Angular-CLI(Angular2 RC4)项目中？进一步来说：我应该如何将我的node_modules文件夹中的缩小.css添加到我的angular-cli项目中？我是否必须将其添加到angular-cli-build.js？我必须添加打字吗？我是否必

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

进一步来说：

>我应该如何将我的node_modules文件夹中的缩小.css添加到我的angular-cli项目中？
>我是否必须将其添加到angular-cli-build.js？
>我必须添加打字吗？
>我是否必须将其添加到/src/system-config.ts

解决方法

是的,你必须通过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','@ng-bootstrap/ng-bootstrap/alert': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/buttons': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/carousel': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/collapse': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/dropdown': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/pagination': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/popover': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/progressbar': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/rating': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/tabset': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/timepicker': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/tooltip': {
    defaultExtension: 'js','@ng-bootstrap/ng-bootstrap/typeahead': {
    defaultExtension: 'js',main: 'index.js'
  }
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!