Angular中允许创建与HTML元素同名的组件吗？

不建议这么做，这就是你遇到问题的根源：

• Angular解析模板时，会优先把<button>识别成你自定义的同名组件，而非原生HTML按钮。你的组件模板里又写了<button>，等于组件递归调用自己，最终触发无限循环导致运行时页面报错；而编译阶段不会检测这种命名冲突，所以编译能通过但运行会崩溃。

解决办法：

1. 优先选择改名：给自定义组件加个前缀，比如改成app-button或者custom-button，这是Angular组件的标准命名方式，能彻底避免和原生元素冲突。
2. 非要保留同名的话（不推荐），可以用命名空间前缀区分原生元素：

   <html:button [ngStyle]="{'background-color': bgcolour}" class="button">{{text}}</html:button>
   

内容的提问来源于stack exchange，提问作者Rico Strydom