Angular2開發踩坑系列-生產環境編譯

版權聲明：更多文章請訪問個人我的站 Keyon Y，轉載請註明出處。

公司移動端項目須要技術選型，此前僅僅是學過ng2會用而已，因而想趁着這個項目，深刻學習一下angular2就提議給CTO。最終選擇了angular2做爲 前端框架，因而填坑之路 開始了....

下邊說幾個在生產環境編譯的時候遇到的天坑..ToT

使用ng build --prod--aot編譯出來的文件，部署到服務器以後，在微信內置瀏覽器和手機谷歌瀏覽器上能夠打開網站，可是在國內安卓手機的系統內置瀏覽器以及UC瀏覽器等打不開，始終停留在loading界面

我曾天真覺得手機上沒有兼容性問題，能夠放肆的'玩耍'，沒想到啊沒想到，竟然有這麼一個巨坑。。

在我費勁心思百穀找尋緣由未果以後，在PC上安裝了安卓abd調試工具，下載了UC開發者版本，而後鏈接電腦，在谷歌瀏覽器控制檯查找緣由，終於發現了報了一行錯

TypeError: 'undefined' is not a function

這是什麼鬼？？點開具體報錯的位置以後發現，在一行編譯後的代碼裏 object.assign()這個方法報錯了，這是一個es6的方法，而且angular-cli配製的轉版本沒法將object.assign()轉成es5版本，因此UC就不支持了。。

因而，在尋找解決方法。。此處省略一萬字

最終在stackoverflow上找到兩位大神的回答：

根據這兩位大神 所述，安裝babel-polyfill的npm包後，引入就行了。

你覺得就這麼完了？？

我在src目錄下polyfills.ts中引入，結果編譯完放到服務器上又有了新的報錯。。

還有引入順序的問題。。新引入的babel-polyfill把Zone.js的Promise方法覆蓋掉了，致使編譯又出錯了。。

而後我在polyfills.ts中找到引入 zone.js的地方，將babel-polyfill的引入寫在了 這裏，

/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'babel-polyfill';
import 'zone.js/dist/zone';  // Included with Angular CLI.

總算 這個問題解決了。手機UC瀏覽器和安卓系統內置瀏覽器 終於能夠正常打開了。

BUT,每次打開超級慢，網絡情況良好，但就是打開的特別慢，在loading界面轉十幾到二十幾秒鐘才進來，此次的問題在微信、谷歌、UC、安卓瀏覽器上無一例外。

又百穀起來。。。此處省略兩萬字

找了很久，原來angular-cli的ng build --prod--aot（這是看着大漠窮秋的ng2視頻上學的指令）該指令是不正確的，如今我這樣執行的僅僅是

ng build 普通編譯

因此編譯後的文件大小 和 源代碼的大小几乎一致。應該使用的是預編譯(AOT)，如今的angular-cli中已經將預編譯(AOT)包含在了ng build --prod指令中，那麼我應該是用的是ng build --prod指令，沒錯。

因而，我輸入ng build --prod 回車，而後，而後就悲劇了。。。

上百條的報錯，，我看了一下，報錯最多的是：

Property ‘x’ is private and only accessible within class ‘MyComponent’

我在不知道什麼網站上找到了解釋:

翻譯： 使用AOT，類中的私有屬性和方法只能在類中訪問。 要訪問模板中的屬性或方法，屬性或方法必須聲明爲public。

使用typescript定義變量時，用到public、private、protect，在不進行預編譯(AOT)時，private的變量在html模板中使用是不會報錯的，但使用了AOT後，要求的很嚴格，即便是同一個component中，只要不僅是在ts文件中使用，就應該定義爲public。

SO，我又將全部ts文件中在本文件以外調用的private定義的變量/函數變成了public。
而後再次執行 ng build --pord，，又失敗了。。

Property ‘x’ is private and only accessible within class ‘MyComponent’
上一個報錯沒有了，還有很多別的報錯

Property 'username' does not exist on type 'UserInfo'

通過再次排查，發現由於typescript是強類型語言，在進行AOT編譯時，從後端接口中獲取的數據應該有對應的interface與之對應，在開發過程當中咱們並無這麼作，能夠正常運行，但AOT不行。

因而又新建了數個接口文件，將這些用到的對象都按照服務器返回的數據格式進行定義interface，隨後再引入組件的ts類中。這裏請參考微軟typescript中文網文檔

改完以後，再次執行ng build --prod，終於完美編譯~~此時的我內牛滿面ToT~
編譯後的文件比源文件少了一半的大小，編譯後的js都是壓縮過的

填了三天坑，總算把ng2生產環境編譯的坑填平了(暫時的~)