Angular 5中Edge浏览器点击关闭按钮后页面自动刷新问题

我最近做Angular项目时遇到了一个跨浏览器的小坑：页面里设置了两个按钮，在Chrome里运行完全正常，但在Edge浏览器中点击「Close」按钮后，整个页面会自动刷新，还弹出报错：

Unable to get property 'handleEvent' of undefined or null reference polyfills.bundle.js (4262,17)

我的初始代码 #

HTML部分：

<button *ngIf="!loader" type="submit" class="custom-button blue left">Update</button> 
<button (click)="close()" class="custom-button red left">Close</button>

TypeScript部分：

export class InventoryDetailsComponent implements OnInit { 
  @Input() inventoryDetails: boolean; 
  @Output() inventoryDetailsChange = new EventEmitter<boolean>(); 
  @Output() update = new EventEmitter(); 
  close () { 
    this.inventoryDetailsChange.emit(false); 
  }
}

问题排查与解决 #

一开始我完全摸不着头脑，不知道Edge为什么会在这个点击事件上崩溃。后来反复测试才发现问题出在按钮的type属性设置上：最开始我把两个按钮都设成了type='button'，这让Edge浏览器产生了混淆，误把Close按钮当成了表单提交的触发源，导致页面刷新。

当我把提交按钮明确设置为type='submit'，而Close按钮保持默认（或者显式设为type='button'）后，Edge里的页面刷新和报错问题就完全解决了！

内容的提问来源于stack exchange，提问作者Nenad Drobac