angular开发报错：InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ')' is not a valid

╰+攻爆jí腚メ 2021-09-28 04:04 673阅读 0赞

**问题描述：**  
在webStorm开发angular应用时候，页面刷新不出来，浏览器控制台报错，看了很多没找到问题。  
core.js:14597 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.  
**具体报错如下：**

core.js:14597 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.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (platform-browser.js:1094)
        at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.setAttribute (animations.js:234)
        at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setAttribute (core.js:22895)
        at createElement (core.js:19549)
        at createViewNodes (core.js:21782)
        at callViewAction (core.js:22137)
        at execComponentViewsAction (core.js:22056)
        at createViewNodes (core.js:21849)
        at createRootView (core.js:21735)
        at callWithDebugContext (core.js:22767)
        at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (platform-browser.js:1094)

**查错过程：**  
1、检查程序有误明显异常  
2、检查依赖是否正常  
3、检查对应页面逻辑  
后面仔细看了也发现错误在(click)=“addUser()” ) 多了括号，webstorm没报错，没有提醒，改正之后页面正常展示页面啦，哎，浪费时间坑，对报错异常不清晰，没早点发现问题，浪费不少时间。感觉angular报错也不太直白。。。吐槽一下~

<div style="margin-top: 5px;float:right;">
              <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="addUser()" )>添加员工</button>
              <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="whiteList()">进入白名单</button>
              <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="syncUser()" >同步人员</button>
              <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="syncOrg()" >同步机构</button>
              <button mat-raised-button (click)="openDialog()">Pick one</button>
            </div>

\*\*

## 解决！ ##

\*\*