将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以禁止显示此消息 - TypeScript

如果你也遇到了类似以下的错误提示：

'app-my-component' is not a known element:
1. If 'app-my-component' is an Angular component, then verify that it is part of this module.
2. If 'app-my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

那么很可能是因为你本地开发环境中没有添加CUSTOM_ELEMENTS_SCHEMA模块导致的，这里会简单介绍一下如何解决这个错误。

什么是 CUSTOM_ELEMENTS_SCHEMA

在 Angular 中，CUSTOM_ELEMENTS_SCHEMA 是用来扩展 Angular 模块的一个模块，通常用于支持 Web Component。

如果我们在 Angular 组件或模板中使用了自定义的 Web Components，但是缺少 CUSTOM_ELEMENTS_SCHEMA 模块，则会出现以上的错误提示。

解决方法

对于这个问题，最简单的解决方法就是在引用 Web Components 的模块组件中添加 CUSTOM_ELEMENTS_SCHEMA 。

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MyWebComponent } from './my-web-component.component'; 

@NgModule({
  declarations: [MyWebComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加 CUSTOM_ELEMENTS_SCHEMA
})
export class AppModule { }

这样就可以在使用 Web Components 时避免出现“未知元素”的错误提示了。

总结

在使用 Web Components 时，需要注意添加 CUSTOM_ELEMENTS_SCHEMA 模块，以避免出现以上错误提示。在 Angular 中， CUSTOM_ELEMENTS_SCHEMA 是用来扩展 Angular 模块，通常用于扩展 Web Component 。希望这篇文章能对你的开发有所帮助！