Error Message:
ERROR Error: [@ant-design/icons-angular]:the icon XXX does not exist or is not registered.
Solution:
Adding startup services
nz-icon-register.service.ts
import { APP_INITIALIZER, Injectable } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd/icon';
export const SvgIcons = [
// nzType='plus'
{
namespace: 'nz:plus',
literal: '<svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em" data-icon="plus" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>',
},
];
@Injectable({
providedIn: 'root'
})
export class NzIconRegisterService {
constructor(
private nzIconService: NzIconService,
) { }
registeIcons(): void {
SvgIcons.forEach(icons => {
this.nzIconService.addIconLiteral(icons.namespace, icons.literal);
})
}
}
function factory(service: NzIconRegisterService ) {
return () => service.registeIcons();
}
export const ICON_REGISTER_PROVIDES = [
NzIconRegisterService ,
{
provide: APP_INITIALIZER,
useFactory: factory,
deps: [ NzIconRegisterService ],
multi: true,
}
];
Add the startup service to the startup item
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { ICON_REGISTER_PROVIDES } from '@core/services/nz-icon-register.service';
@NgModule({
declarations: [AppComponent],
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule,
// ...other modules
],
providers: [
ICON_REGISTER_PROVIDES,
],
bootstrap: [AppComponent],
})
export class AppModule {}
Read More:
- VScode vue Project Error: Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly…Vetur(2339)
- [Solved] JQuery each Method Error: $XXX is not defined
- Vue Error: component has been registered but not used [Two Methods to Solve]
- [Solved] Uncaught (in promise) TypeError: XXX.a is not a constructor
- ‘webpack dev server’ is not an internal or external command, nor is it a runnable program or batch file. Solution: error in cnpm run dev:
- ArcGIS API for JavaScript Error Uncaught(in promise): TypeError: xxx is not a constructor
- [Solved] Vue3.0 Error: The component has been registered but not used vue/no-unused-components, Close eslint
- [Solved] npm Error: Class extends value undefined is not a constructor or null
- [Solved] Yapi Secondary deploy error: xxx validation failed: mock: Path `xxx` is required
- [Solved] Error while trying to use the following icon from the Manifest
- [Solved] Uniapp project use vant icon Error: (module build failed from./node_modules/postcss loader/SRC/index)
- [Solved] vite package Error: globalThis is not defined
- [Solved] ERROR in ./src/main.ts Module not found: Error: Can‘t resolve ‘xxx‘
- Vuepress build error: window is not defined [How to Solve]
- [Solved] electron Package and Startup Error: Error: ENOENT: no such file or directory, open ‘xxx/manifest.json‘‘
- [How to Solve] TypeError: XXX is read-only
- [Solved] Vue Error: template or render function not defined
- [Solved] Vue uses webpack to package error: Createapp is not a function
- xxx is assigned a value but never used [How to Solve]
- [Solved] error ‘xxx‘ is never reassigned. Use ‘const‘ instead prefer-const