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

Question

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

更具体地说：

1. 我应该如何从我的node_modules文件夹中添加缩小的的CSS我的角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 

然后打开你的角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 /系统的conf ig.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法哈德上述回答，但我想给一些解释的那一个，

其实，如果你要添加一些第三方库angular CLI那么您必须在angular-cli-build.js文件中添加该第三方库引用，因为角度cli将供应商文件夹中的所有文件取而代之node_modules文件夹，所以只要你在cli-build文件中为你的库添加条目（在你的情况下说ng-bootstrap）。它会在角度cli的供应商文件夹中复制该库。这对我们的项目是可用的。所以

How should I add the minified .css from my node_modules folder to my angular-cli project?

你必须给，才能在供应商文件夹来获得在system-cli-build.js文件的文件/库的参考。

Do I have to add it to angular-cli-build.js

是，它的强制性，如果它是图书馆，而不是仅仅在单个文件的情况下，比你可以删除该文件到公用文件夹了。它取决于你。

Do I have to add the typings?

没有太多的强制性。

希望这清除更多！