如何为Angular添加自定义schema，同时保留模板验证功能？

你提到的需求完全可以实现，以下是不同场景下的可行方案，同时会说明你之前尝试方案失效的原因。

原方案失效原因 #

你尝试的自定义ElementSchemaRegistry方案未生效主要有两点原因：

• 代码存在拼写错误：定义的类名为CustomSchemaRegistry，注入时错误写为CustomElementSchemaRegistry
• 仅支持JIT编译模式：当前Angular项目默认启用AOT预编译，模板校验逻辑在打包编译阶段执行，不会读取运行时注入的provider，因此该方案对AOT模式无效。

方案1：JIT编译模式适配 #

修正拼写错误后，该方案可在JIT场景下正常生效，仅放行指定前缀的自定义标签，其余标签保留原有校验能力：

// 自定义Schema校验类
import { DomElementSchemaRegistry } from '@angular/compiler/src/schema/dom_element_schema_registry';
import { ElementSchemaRegistry, SchemaMetadata } from '@angular/compiler';

export class CustomSchemaRegistry extends DomElementSchemaRegistry {
  constructor() {
    super();
  }

  hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean {
    // 仅放行前缀为custom-component-的自定义标签
    return tagName.startsWith('custom-component-') || super.hasElement(tagName, schemaMetas);
  }

  hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean {
    return tagName.startsWith('custom-component-') || super.hasProperty(tagName, propName, schemaMetas);
  }
}

启动时注入修正为正确的类名：

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    providers: [{ provide: ElementSchemaRegistry, useClass: CustomSchemaRegistry }],
  })

注：建议使用startsWith代替includes，避免匹配到包含前缀但不是自定义标签的元素。

方案2：全编译模式通用轻量方案 #

如果你的项目使用AOT编译（绝大多数生产场景），不想做复杂的编译逻辑扩展，可以用模块粒度控制的方式，既满足自定义标签使用需求，又尽可能降低校验失效风险：

• 新建单独的共享模块（例如WebComponentsModule），将所有用到自定义web组件的组件、指令都放到该模块内声明并导出
• 仅在该共享模块的@NgModule.schemas配置中添加CUSTOM_ELEMENTS_SCHEMA
• 其他业务模块需要使用自定义标签时，导入该共享模块即可
  这种方式只会让该共享模块内的模板跳过标签校验，其余所有业务模块的模板校验能力完全保留，风险可控。如果使用Angular 16及以上版本，还可以进一步将schemas配置下沉到组件级别，仅给用到自定义标签的单个组件配置CUSTOM_ELEMENTS_SCHEMA，校验失效范围可以缩小到单个组件。

方案3：AOT模式下的完全自定义校验实现 #

如果需要在AOT模式下也实现仅放行指定前缀标签的严格校验逻辑，需要扩展Angular的编译流程：

1. 使用@angular-builders/custom-webpack替换默认的Angular CLI构建器
2. 自定义编译钩子，在AOT模板校验阶段替换默认的DomElementSchemaRegistry为你自定义的实现
3. 在angular.json中配置自定义构建逻辑即可实现全编译模式下的自定义校验规则。

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