前言
上周五，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左右。。现在如下
编译速度稍微有所提升，可以感觉出来。。
部分迁移事项可以参考我之前的一篇文章，因为动画模块分离了等。。
