Angular自定义元素创建失败：'zktest'不是有效自定义元素名称

AI 小北

2026-6-15

问题分析与解决

错误提示"zktest" is not a valid custom element name的核心原因是你在AppModule的imports数组中错误地声明了组件，正确的做法是将组件放在declarations数组里。

错误代码问题点

在你的app.module.ts中，@NgModule的imports数组里包含了ZkComponent：

@NgModule({
  imports: [
    BrowserModule,
    ZkComponent // ❌ 组件不能放在imports里，此处应使用declarations
  ],
  // ...
})

imports数组的作用是导入其他NgModule，而组件、指令、管道必须放在declarations数组中才能被NgModule正确识别。错误的位置导致Angular内部处理组件时出现命名变形，最终抛出无效自定义元素名称的错误。

修正后的app.module.ts代码

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { ZkComponent} from './zk/zk/zk.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    ZkComponent // ✅ 组件放在declarations数组中
  ],
  providers: [],
  bootstrap: [],
  // Angular 9+ Ivy编译器下entryComponents可省略，若仍有问题可添加
  // entryComponents: [ZkComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const zkTestElement = createCustomElement(ZkComponent, { injector });
    customElements.define('zk-test', zkTestElement);
  }

  ngDoBootstrap() {}
}