如何將引導程序添加到 angular-cli 項目 - How to add bootstrap to an angular-cli project

問題：

We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0).我們想在使用 angular-cli 1.0.0-beta.5（帶有節點 v6.1.0）生成的應用程序中使用 bootstrap 4 (4.0.0-alpha.2)。

After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in angular-cli-build.js :使用 npm 獲取引導程序及其依賴項後，我們的第一種方法是將它們添加到angular-cli-build.js ：

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

and import them in our index.html並將它們導入我們的index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

This worked fine with ng serve but as soon as we produced a build with -prod flag all these dependencies disappeared from dist/vendor (surprise !).這在ng serve運行良好，但是一旦我們使用-prod標誌生成構建，所有這些依賴項都從dist/vendor消失了（驚喜！）。

How we are intended to handle such scenario (ie loading bootstrap scripts) in a project generated with angular-cli ?我們打算如何在用 angular-cli 生成的項目中處理這種情況（即加載引導腳本）？

We had the following thoughts but we don't really know which way to go...我們有以下想法，但我們真的不知道該走哪條路......

• use a CDN ?使用 CDN 嗎？ but we would rather serve these files to guarantee that they will be available但我們寧願提供這些文件以保證它們可用

• copy dependencies to dist/vendor after our ng build -prod ?在我們的ng build -prod之後將依賴項複製到dist/vendor ？ But that seems like something angular-cli should provide since it 'takes care' of the build part ?但這似乎是 angular-cli 應該提供的東西，因爲它“負責”構建部分？

• adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ?在src/system-config.ts添加 jquery、bootstrap 和 tether 並以某種方式將它們拉入我們在main.ts的包？ But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).但這似乎是錯誤的，因爲我們不會在應用程序的代碼中明確使用它們（例如，與 moment.js 或 lodash 之類的東西不同）。

---

解決方案：

參考一： https://en.stackoom.com/question/2XyGa
參考二： https://stackoom.com/question/2XyGa