Angular CLIで ng build
ではエラーにならないのに、ng build --aot
や ng build --prod
ではエラーになるケースがあります。
エラーとなるのはテンプレート部分のコードで、次のようにstring型の変数の頭に+を付けてnumberに変換していると軒並みエラーになってしまいます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div>
<input type="text" [(ngModel)]="valueA" (ngModelChange)="doCalc()" />
x
<input type="text" [(ngModel)]="valueB" (ngModelChange)="doCalc()" />
= {{resultValue}}
</div>
<button (click)="calc(+valueA, +valueB)">NG calc</button>
<button (click)="resultValue = +valueA * +valueB">NG calc2</button>
`
})
export class AppComponent {
valueA: string = '1';
valueB: string = '2';
resultValue: number;
constructor() {
this.doCalc();
}
doCalc() {
this.calc(+this.valueA, +this.valueB);
}
calc(a: number, b: number) {
this.resultValue = a * b;
}
}
これを ng build --aot
すると +valueA
や +valueB
の部分から以下のエラーが出ます。
Argument of type 'string' is not assignable to parameter of type 'number'.
The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
なんのこっちゃなエラーで混乱しますが、ようするにテンプレート部分にごちゃごちゃしたコードを書かなければいいのです。と解釈して直しましょう...
※環境は @angular/cli 1.0.2, Angular 4.1.1です。以前のバージョンではこのようなコードでもエラーになりませんでしたが、現在はダメみたいです。
Template Syntaxついては【Angular.io】 Template Syntax まとめによくまとまっています。