Angular 5中'hgroup'非已知元素错误：原因咨询

嘿，我来给你捋清楚这个问题的根源和解决办法：

错误原因 #

Angular的模板编译器默认是很严格的——它只认标准HTML元素和你自己注册过的Angular组件/指令。虽然<hgroup>是合法的HTML5元素，但Angular会把它标记为未知元素，主要有两个原因：

1. 默认Schema的限制：Angular的默认DOM模式并没有把所有小众的HTML元素都包含进去，<hgroup>就是其中之一。编译器会把它当成一个自定义组件，而不是原生HTML标签，所以才会报错问你是不是忘了注册这个组件。
2. 严格模板校验：如果你的项目在tsconfig.json里开启了strictTemplates（新版本Angular默认可能开启），编译器会对未识别的元素更加敏感，像<hgroup>这种不常用的原生标签就容易触发错误。

可行的解决办法 #

办法一：给模块添加NO_ERRORS_SCHEMA #

这是最快的解决方式——告诉Angular忽略所有未知元素和属性的错误。只要在组件所属的NgModule的schemas数组里加上它就行：

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 你的组件名 } from './你的组件路径.component';

@NgModule({
  declarations: [你的组件名],
  imports: [CommonModule],
  schemas: [NO_ERRORS_SCHEMA] // 加上这一行
})
export class 你的模块名 { }

⚠️ 注意：这个设置会屏蔽所有未知元素的错误，所以要谨慎使用——万一你后来拼错了组件选择器，这个错误也会被掩盖掉。

办法二：确认Angular版本和DOM支持 #

如果你用的是较新版本的Angular，<hgroup>应该是被原生支持的。先检查你的模块有没有导入BrowserModule（根模块）或者CommonModule（特性模块）——这两个模块会注册所有标准HTML元素的支持。

如果开启了strictTemplates，你可以暂时把它在tsconfig.json里设为false来测试，或者确保你的Angular版本已经把<hgroup>纳入了允许的原生元素列表。

关于<hgroup>的小补充 #

顺便提一句：<hgroup>是HTML5里用来分组标题元素的（比如<h1>加<h2>），但它在现代开发里用得不多，这也是为什么Angular的默认Schema没把它优先包含进去的原因之一！

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