Angular项目Karma测试报错：hourglass-o图标未找到/未注册求解决

我发现这个问题和导入操作或者在providers数组中添加内容有关，请问有没有可行的解决办法？

环境配置 #

• Angular CLI: 13.3.10
• Node: 14.17.3
• 包管理器: npm 6.14.13
• 操作系统: win32 x64
• Angular: 13.3.12

报错信息 #

Error: [@ant-design/icons-angular]:the icon hourglass-o does not exist or is not registered.
    at IconNotFoundError (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@ant-design/icons-angular/fesm2015/ant-design-icons-angular.mjs:93:12)
    at MapSubscriber.project (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@ant-design/icons-angular/fesm2015/ant-design-icons-angular.mjs:235:23)
    at MapSubscriber._next (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/map.js:29:1)
    at MapSubscriber.next (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
    at Observable._subscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/util/subscribeToArray.js:3:1)
    at Observable._trySubscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Observable.js:42:1)
    at Observable.subscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Observable.js:28:1)
    at MapOperator.call (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/map.js:16:1)
    at Observable.subscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Observable.js:23:1)
    at http://localhost:9877/_karma_webpack_/webpack:/node_modules/@ant-design/icons-angular/fesm2015/ant-design-icons-angular.mjs:405:113

测试文件代码（spec.ts） #

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/compiler';
import { async, ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';

import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule } from '@ngx-translate/core';
import { NgZorroAntdModule } from 'app/ng-zorro.module';
import { searchBarComponent } from './search-bar.component';


describe('searchBarComponent', () => {
  let component: searchBarComponent;
  let fixture: ComponentFixture<searchBarComponent>;
  beforeEach(waitForAsync(() => {
   
    TestBed.configureTestingModule({
      declarations: [ searchBarComponent ],
      providers:[],
      imports:[HttpClientModule, RouterTestingModule,NgZorroAntdModule,TranslateModule.forRoot()],
      schemas:[CUSTOM_ELEMENTS_SCHEMA]

    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(searchBarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

这个错误是因为hourglass-o图标未在测试环境中正确注册，以下是两种可行的处理方案：

方案一：单独注册指定图标 #

1. 在测试文件顶部导入对应图标类（Ant Design Icons Angular中，hourglass-o对应类名为HourglassOutline）：

import { HourglassOutline } from '@ant-design/icons-angular/icons';
import { IconDefinition } from '@ant-design/icons-angular';

2. 在TestBed.configureTestingModule的providers数组中注册该图标：

TestBed.configureTestingModule({
  declarations: [ searchBarComponent ],
  providers:[
    { provide: 'ANT_ICONS', useValue: [HourglassOutline] as IconDefinition[] }
  ],
  imports:[HttpClientModule, RouterTestingModule,NgZorroAntdModule,TranslateModule.forRoot()],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})

方案二：批量注册所有图标（仅推荐测试环境临时使用） #

如果不想逐个导入图标，可以直接注册全部Ant Design图标：

1. 导入所有图标集：

import * as AllIcons from '@ant-design/icons-angular/icons';
import { IconDefinition } from '@ant-design/icons-angular';

2. 转换为图标数组并注册：

const antIcons = Object.values(AllIcons) as IconDefinition[];

TestBed.configureTestingModule({
  declarations: [ searchBarComponent ],
  providers:[
    { provide: 'ANT_ICONS', useValue: antIcons }
  ],
  imports:[HttpClientModule, RouterTestingModule,NgZorroAntdModule,TranslateModule.forRoot()],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})

注意事项 #

• 图标命名对应规则：带-o后缀的图标对应Outline结尾的类名，比如hourglass-o对应HourglassOutline，避免因名称不匹配导致错误。
• 如果项目全局模块中已注册该图标，但测试环境未继承全局配置，仍需在测试模块中单独注册。

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