如何將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?

沒有太多的強制性。

希望這清除更多！