Angular CLIでテンプレートのコードがAoTコンパイル通らないケース

Angular CLIで ng build ではエラーにならないのに、ng build --aot や ng build --prod ではエラーになるケースがあります。

エラーとなるのはテンプレート部分のコードで、次のようにstring型の変数の頭に+を付けてnumberに変換していると軒並みエラーになってしまいます。

app.component.ts

Copied!

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 まとめによくまとまっています。