ある日突然こんなバグに遭遇した
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)
...
コンソール出力はこれだけ。色々調べてみたけど、それっぽい記事が出てこない。コンソールに情報が0なのでデバックにかなりの時間を費やした。
結論
環境によって理由は様々だろうが、私が上記のエラーにハマった理由はこれだった。
<div class="card-block" ( click )="siteSelected( site );">
イベントバインドの両サイドの空白、、、本当にしょうもないミスだったけど、全くデバックできなかったので教訓としてメモしておきます、、、