为什么HTML原生main标签在Angular中会报NG8001未识别错误？

解决方案 #

方案1：优先调整Angular模块配置（不改动原有HTML和CSS代码） #

根据你用的Angular组件模式二选一即可：

• 如果你使用的是独立组件（Standalone Component）：在当前组件的@Component装饰器的imports数组中加入CommonModule，示例如下：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-your-page',
  standalone: true,
  imports: [CommonModule], // 新增CommonModule导入
  templateUrl: './your-page.component.html',
  styleUrls: ['./your-page.component.scss']
})
export class YourPageComponent {}

• 如果你使用的是NgModule管理的组件：在当前组件所属NgModule中先确认导入了CommonModule，如果还是报错则新增CUSTOM_ELEMENTS_SCHEMA到schemas数组中，示例如下：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { YourPageComponent } from './your-page.component';

@NgModule({
  declarations: [YourPageComponent],
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 新增该行豁免未知标签校验
})
export class YourPageModule {}

方案2：零配置快速解决 #

直接把HTML中的<main>标签替换为<div class="main">，同时把SCSS中的main选择器修改为.main即可，完全不需要改动Angular相关配置。

原因说明 #

原生HTML环境由浏览器直接解析，默认支持所有HTML5语义化标签；而Angular的模板编译器会在编译阶段对所有标签做合法性校验，只有Angular内置组件、已注册的自定义组件、已配置豁免的标签才会通过校验，低版本Angular或者未导入公共模块时就会对<main>这类语义化标签抛出未知元素错误。

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