前言
上周五，ng4正式发布了。。很多小伙伴迫不及待的把项目升级了。。。
然后到群里各种吼，无损升级，没有什么奇葩问题，大家放心升级。。
我信了。。。把公司的项目给升级了，然后就开始掉坑了。。。
普通的开发模式和打包模式皆正常，不正常的是AOT打包。。
问题汇总
升级后第一次打包吓死我了，各种错误超过150条。。。部分效果图
初步汇总后基本分为这三类，且看我道来。。。【typescript 2.2比老版本2.0严谨很多；】
问题1：Property xxx does not exist on type xxxComponent….
解决方案：
- 任何[(ngModel)]的变量必须在组件内声明
- 全局变量也必须在组件内声明，比如你在html中写了这种表达式(click)="temp = $event",temp必须声明
问题2：Property controls does not exist on type AbstractControl
这个问题的是表单的部分API变动了。具体去看最新的api（v4）和老版本api(v2)的比较–
解决方案：使用get来获取嵌套表单的响应值,新的写法比较直观也好维护，嘎嘎,看代码
// 旧版本。2.4.10及以下可以生效的。。
[ngClass]="{ 'has-danger': form.controls.RuleContent.controls.FenceName.invalid && form.controls.RuleContent.controls.FenceName.value,'has-success': form.controls.RuleContent.controls.FenceName.valid && form.controls.RuleContent.controls.FenceName.value }" // v4的支持且AOT不报错的 [ngClass]="{ 'has-danger': form.get('RuleContent.FenceName').invalid && form.get('RuleContent.FenceName').value,'has-success': form.get('RuleContent.FenceName').valid && form.get('RuleContent.FenceName').value }"
问题3：Supplied parameters do not match any signature of call target
这个问题的原因所在，就是平时代码不严谨造成的；
比如你在html声明了一个函数，传入了一个参数,看代码
<app-mit-alert [title]="'操作提示'" [saveName]="'确认'" [closeName]="'取消'" (close)="closeHandler($event)" (submit)="saveHandler(item)">
确认删除？
</app-mit-alert>
import { Component,OnInit,Input,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'app-delete',templateUrl: './delete.component.html',styleUrls: ['./delete.component.scss']
})
export class DeleteComponent implements OnInit {
@Input() item: any;
@Output() close = new EventEmitter(); // 用于向父级发送弹窗关闭事件
constructor() { }
ngOnInit() {
}
saveHandler(e) {
this.close.emit(e);
}
// 这个小组件中外部传入了一个$event，你这对应的函数没有传入对应的形参
// 空参就会报这个错误，因为之前觉得这只是作为关闭操作，传回去是个null，就不传了
// so。。小伙伴们代码还是严谨些好
closeHandler(e) {
this.close.emit(null);
}
}
总结
不吹不黑，v4打包后的提交明细小了很多，少了一半以上啊！，少了一半以上啊！！！！
以前的前十五个chunk基本都是600~850k左右。。现在如下
编译速度稍微有所提升，可以感觉出来。。
部分迁移事项可以参考我之前的一篇文章，因为动画模块分离了等。。
