kinanson的技術回憶

前言

筆者因為現在正在做angular的底層架構，就為了要把舊系統慢慢的翻成angular的新系統，所以在開發階段的時間非常久，今天忽然要build --prod的時候，發覺竟然有了一些錯誤，但是平時在開發階段都不會發生，這可叫我如何是好，但是有些狀況看來是升上去cli 1.0之後才發生的，可能是以前的版本容錯比較高，就直接幫忙忽略掉了，而這些問題甚至google都還google不太到，筆者也是到github的issue找到的，所以在此記錄下來我遇到的問題，也希望能幫助到有遇到同樣困難的人，所以就簡單記錄一下了。

我同時把我遇到的所有錯誤顯示出來，然後解釋一下這些訊息各代表什麼意思，如何修正。

方便找問題，我個人是直接在cmd打上ng serve --aot，然後就會看到各別三種錯誤訊息，然後我分別貼上程式碼對應

問題1:dropdown.component.ts.DropdownComponent.html (5,14): Property 'item' does not exist on type 'DropdownComponent'.

    <select [(ngModel)]="modelValue" [title]="title">
    	<option *ngIf="defaultText" value="">{{defaultText}}</option>
    	<option *ngFor="let item of list;trackBy:item?.key" [value]="item.key">{{item.value}}</option>
    </select>

實在讓我摸不著頭緒，在template的local variable為何要在ts先定義呢?印象中完全沒這回事啊，後來發現這個原因是因為我寫錯了，trackBy只能是function，但是在開發階段竟然都沒有報錯，因為筆者寫過angularjs和vue和react和目前的angular2，所以有點錯亂掉了，不知道是後來angular2有改掉，還是原本就這樣，總之只要把trackBy改成function就行了。

//html部份
    <select [(ngModel)]="modelValue" [title]="title">
    	<option *ngIf="defaultText" value="">{{defaultText}}</option>
    	<option *ngFor="let item of list;trackBy:trackList" [value]="item.key">{{item.value}}</option>
    </select>

//ts部份
  trackList(index, item) {
    return item.key; //這部份回傳的是你的key值
  }

問題2:Property 'datePickerOptions' is private and only accessible within class 'DatepickerComponent'.

//template
<my-date-picker [options]="datePickerOptions" [(ngModel)]="dateModel" [disabled]="disabled"></my-date-picker>`

//ts
  private datePickerOptions: IMyOptions = {
    dateFormat: 'dd/mm/yyyy',
    height: '19px',
    width: this.width
  };

其實這個是我針對第三方的元件再進行了包裝，範例也都是抄他的範例來的，訊息也很明確，不能訪問私有屬性，更完整的意思是說template不能訪問私有屬性，但這個又很奇怪了，在開發階段都正常啊，結果github的issue解釋是說aot的狀況只能訪問public的，不能訪問private的，不知道未來會不會改掉，總覺得這樣很奇怪，但是只要把private拿掉就可以了

//template
<my-date-picker [options]="datePickerOptions" [(ngModel)]="dateModel" [disabled]="disabled"></my-date-picker>`

//ts
  datePickerOptions: IMyOptions = {
    dateFormat: 'dd/mm/yyyy',
    height: '19px',
    width: this.width
  };

問題3:Supplied parameters do not match any signature of call target.

這個訊息雖然明確，但其實有時候腦袋不清楚的時候，就會看不太出來，但奇怪的是開發階段也都不會報錯，其實就是我們template定義的方法的參數，跟ts的參數對不上，例子可能如下

//template 下面的onRefresh有丟參數
  <app-read-bar [url]="'/sport/create'" (onRefresh)="onRefresh($event)"></app-read-bar>

//ts 方法這邊卻沒有參數
  onRefresh() {
    if (this.searchDto.search) {
      this.search();
    } else {
      this.sportService.get(this.paginationDto)
        .takeUntil(this._destroy$)
        .subscribe(sportViewModel => this.sportViewModel = sportViewModel);
    }
  }
  

結論

這是筆者遇到的一點問題，如果你遇到了一模一樣的訊息，那希望此篇文章對您有幫助囉。