NG2.4.10升級NG4正式版[正式專案]：修正AOT打包報錯的一些問題

CRPER發表於2019-02-11

前言

上週五，ng4正式釋出了。。很多小夥伴迫不及待的把專案升級了。。。
然後到群裡各種吼，無損升級，沒有什麼奇葩問題，大家放心升級。。
我信了。。。把公司的專案給升級了，然後就開始掉坑了。。。

普通的開發模式和打包模式皆正常，不正常的是AOT打包。。

問題彙總

升級後第一次打包嚇死我了，各種錯誤超過150條。。。部分效果圖

NG2.4.10升級NG4正式版[正式專案]：修正AOT打包報錯的一些問題

初步彙總後基本分為這三類，且看我道來。。。【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.10升級NG4正式版[正式專案]：修正AOT打包報錯的一些問題

編譯速度稍微有所提升，可以感覺出來。。

部分遷移事項可以參考我之前的一篇文章，因為動畫模組分離了等。。

NG2&4折騰記 --- 記NG2升級NG4 RC1之修正問題跑起來

相關文章