ある日突然こんなバグに遭遇した

ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '(' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2853)
    at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.setAttribute (core.es5.js:13376)
    at createElement (core.es5.js:9371)
    at createViewNodes (core.es5.js:12044)
...

コンソール出力はこれだけ。色々調べてみたけど、それっぽい記事が出てこない。コンソールに情報が０なのでデバックにかなりの時間を費やした。

結論

環境によって理由は様々だろうが、私が上記のエラーにハマった理由はこれだった。

<div class="card-block" ( click )="siteSelected( site );">

イベントバインドの両サイドの空白、、、本当にしょうもないミスだったけど、全くデバックできなかったので教訓としてメモしておきます、、、