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生产环境编译的坑填平了(暂时的~)