Angular库导入PrimeNG组件后Karma测试报NG0304错误求助

核心问题分析 #

你遇到的NG0304错误本质是测试环境未正确识别PrimeNG的p-messages组件，而在非独立组件中添加CUSTOM_ELEMENTS_SCHEMA属于用法错误（该配置仅适用于独立组件）。以下是针对性修复步骤：

1. 修正测试文件的模块配置 #

Karma测试的spec文件中，必须确保测试模块导入了包含p-messages的模块。打开lib.component.spec.ts，修改TestBed配置：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LibComponent } from './lib.component';
// 导入所需模块
import { FormsModule } from '@angular/forms';
import { MessagesModule } from 'primeng/messages';

describe('LibComponent', () => {
  let component: LibComponent;
  let fixture: ComponentFixture<LibComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [LibComponent],
      // 关键：导入MessagesModule和FormsModule
      imports: [FormsModule, MessagesModule]
    }).compileComponents();

    fixture = TestBed.createComponent(LibComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

2. 移除组件中的无效schemas配置 #

直接删除LibComponent装饰器中的schemas:[CUSTOM_ELEMENTS_SCHEMA]，非独立组件（未设置standalone: true）不支持该配置，且你的场景中根本不需要这个配置——p-messages是PrimeNG提供的Angular组件，不是自定义Web组件。

3. 优化库模块配置 #

保持LibModule的配置，但可以移除多余的CUSTOM_ELEMENTS_SCHEMA（避免干扰组件识别）：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { LibComponent } from './lib.component';
import { InputTextModule } from 'primeng/inputtext'
import { MessagesModule } from 'primeng/messages'

@NgModule({
  declarations: [
    LibComponent
  ],
  imports: [
    FormsModule,
    InputTextModule,
    MessagesModule
  ],
  exports: [
    LibComponent
  ]
})
export class LibModule { }

4. 清理缓存并重新测试 #

执行以下命令清理缓存，避免旧构建文件干扰测试结果：

ng clean
npm run build
npm run test

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