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

前言

上周五,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左右。。现在如下

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小鹏的专栏

在mac上安装Xgboost Python库

最近在mac上用到xgboost库,安装时遇到颇多大坑,网上查了很多答案几乎都是win上的问题,没遇到理想的,自己也就摸着石头把几个大坑给填了,总结一下,给后...

27110
来自专栏点滴积累

Fish Shell

今天看到阮一峰同学的一篇博客(Fish shell 入门教程),讲述的非常详细、清楚,有兴趣的可以直接转去查看此文,本文仅提供一下个人使用心得。 一、fish ...

3696
来自专栏前端达人

JavaScript基础——你真的清楚JavaScript是什么吗?

为前端开发,你是否问过自己或者思考过什么是JavaScript吗?JavaScript有什么特点?如果让你让一句话高度介绍,你会怎么说?小编认为,在你想深入一门...

25310
来自专栏Android小菜鸡

NativeJS理解和使用

  Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。   如果说Node.js把js扩展到...

8115
来自专栏生信宝典

不用Linux也可以的强大文本处理方法

标题党了,其实是论VIM的使用。 做生物信息分析最合适的还是Linux操作系统,所以生信宝典在最开始就推出了Linux学习系列,由浅入深的讲述了Linux学习中...

1926
来自专栏潇涧技术专栏

ChromeADB Project Analysis

chromeadb项目源码:https://github.com/importre/chromeadb chromeadb工具的本质就是利用adb命令以可视化...

3191
来自专栏JackieZheng

探秘Tomcat——从一个简陋的Web服务器开始

前言:   无论是之前所在实习单位小到一个三五个人做的项目,还是如今一个在做的百人以上的产品,一直都能看到tomcat的身影。工作中经常遇到的操作就是启动和关闭...

2087
来自专栏FreeBuf

我们的漏洞Webug 3.0中级进阶攻略(上)

WeBug名称定义为“我们的漏洞”靶场环境。基础环境是基于PHP/mysql制作搭建而成,中级环境与高级环境分别都是由互联网漏洞事件而收集的漏洞存在的操作环境。...

48410
来自专栏有趣的django

35.Django2.0文档

第四章 模板  1.标签 (1)if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系...

58310
来自专栏腾讯移动品质中心TMQ的专栏

手机APP安装包缩减方案

安装包大小对于产品很重要 主要有如下几个原因: 1、手机APP安装包的大小会影响用户是否愿意花费流量来下载此APP; 2、包体越大下载过程越长,用户取消下载的可...

2926

扫码关注云+社区

领取腾讯云代金券