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

最新推荐文章于 2024-07-28 19:29:35 发布

weixin_34096182

最新推荐文章于 2024-07-28 19:29:35 发布

阅读量145

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/58d87e9b44d904006879a73d

版权

前言

上周五，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);
  }
}复制代码