Angular 13引入自定义组件报错NG8001问题求助

背景 #

使用Angular 13.3，维护一个名为pazh-base-source的基础组件项目，包含pazh-component.ts组件，需在主项目中复用该组件。已完成以下操作：

• 在基础项目的AppModule中导出目标组件
• 主项目与基础项目的AppModule均配置CUSTOM_ELEMENTS_SCHEMA
• 通过命令 ng-packagr -p ng-package.json && cd dist && npm publish 发布组件库
• 主项目执行 npm i pazh-base-source 安装依赖，并在AppModule中导入PazhComponentsModule

报错信息 #

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

相关代码 #

主项目 app.component.html #

<pazh-component>
   <p>test</p>
</pazh-component>

主项目 app.module.ts #

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PazhComponentsModule
  ],
  providers: [],
  exports: [
    AppComponent
  ],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

基础组件项目 pazh-component.module.ts #

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    PazhComponentComponent,
  ],
  exports: [
    PazhComponentComponent,
  ],
  schemas: [
    NO_ERRORS_SCHEMA,
    CUSTOM_ELEMENTS_SCHEMA,
  ],
  providers: [
    PazhFormBuilderService,
    ReferralService
  ],
})

已尝试操作 #

检查组件选择器，按照Angular官方文档排查步骤操作，问题仍未解决。

排查与修复步骤 #

1. 确认组件库的导出配置

   • 检查基础项目的ng-package.json，确保lib.entryFile指向public-api.ts，且public-api.ts正确导出组件模块：

     export * from './lib/pazh-component.module';
     

   • 注意：组件库的导出入口应为独立的NgModule（如PazhComponentsModule），而非AppModule——AppModule是应用启动模块，不适合作为组件库的对外导出单元。

2. 验证组件库的发布内容

   • 查看基础项目dist目录，确认PazhComponentsModule的编译产物存在，且package.json中的main、module等字段指向正确文件路径。
   • 主项目安装后，检查node_modules/pazh-base-source目录，确认模块文件、组件定义完整无缺失。

3. 核对组件选择器一致性

   • 确认pazh-component.ts中的组件选择器与模板使用的完全一致，无拼写、大小写或连字符错误：

     @Component({
       selector: 'pazh-component', // 需与模板中的标签完全匹配
       ...
     })
     export class PazhComponentComponent {}
     

4. 清理缓存并重新构建

   • 主项目执行 npm cache clean --force，删除node_modules和package-lock.json后重新执行npm install。
   • 主项目执行 ng build --clean，清理构建缓存后重新编译。

5. 检查模块导入正确性

   • 确认主项目中导入语句的包名、模块类名无错误：

     import { PazhComponentsModule } from 'pazh-base-source'; // 包名与模块类名需与组件库定义一致
     

6. 移除不必要的SCHEMA配置

   • 若仅复用Angular组件（非Web Component），基础项目模块和主项目模块均可移除CUSTOM_ELEMENTS_SCHEMA配置，避免干扰Angular的组件检测逻辑。

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