前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >NG2.4.10升级NG4正式版[正式项目]:修正AOT打包报错的一些问题

NG2.4.10升级NG4正式版[正式项目]:修正AOT打包报错的一些问题

作者头像
CRPER
发布2018-08-28 16:10:01
3850
发布2018-08-28 16:10:01
举报
文章被收录于专栏:CRPER折腾记CRPER折腾记

前言

上周五,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来获取嵌套表单的响应值,新的写法比较直观也好维护,嘎嘎,看代码

代码语言:javascript
复制
 // 旧版本。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声明了一个函数,传入了一个参数,看代码

代码语言:javascript
复制
<app-mit-alert [title]="'操作提示'" [saveName]="'确认'" [closeName]="'取消'" (close)="closeHandler($event)" (submit)="saveHandler(item)">
确认删除?
</app-mit-alert>复制代码
代码语言:javascript
复制
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左右。。现在如下

编译速度稍微有所提升,可以感觉出来。。

部分迁移事项可以参考我之前的一篇文章,因为动画模块分离了等。。

NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年03月27日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 问题汇总
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档