Hakadao
諗咁多做乜嘢吖
Hakadao's Blog
【ant design 的坑】ERROR Error: [@ant-design/icons-angular]:the icon *** does not exist or is not registered.的解决方式

文章特色图片:RAIN DAY

官方文档真的睿智得要死,重要的放在最后面,还没有太特别明显的标注

事情起因

最近某个作业要用到ant design去完成,当使用到上传插件时,出现了一个问题。上传的符号“+”不见了

这时候就立刻打开控制台,出现ERROR Error: [@ant-design/icons-angular]:the icon plus-o does not exist or is not registered.

那时没有多想,ant design的图标用不了的话就直接用nebular的图标,反正是在ngx admin基础上做的,原以为可以暂时放下,谁知.....

删除的图标没了,无法点击删除图标这也导致无法触发删除图像事件

解决...

一直浑水摸鱼是不行的,该解决的还是要解决的,于是乎找了Google大神,找了几个解决方法还是卡了很久。起先我以为只是单纯没引入组件问题,看了下文档,但发现引入之后还是不行

中间又卡了很长一段时间,直到在GitHub上的issues中找到了解决方法

最终解决方法

有个回复就是说看到文档到最后边有个静态加载与动态加载板块,那里很清晰说明了两种导入图标的方法(重要的放在最不起眼的位置,还叫清晰)

我用的是静态导入的方法,请注意一定要在 AppModule 里加入你需要的图标,以下是我的修改(对上传控件的照片墙修改)

import { IconDefinition } from '@ant-design/icons-angular';
import { NzIconModule, NZ_ICONS } from 'ng-zorro-antd/icon';

// 引入你需要的图标,如在上传控件中所需要 DeleteOutline, PlusOutline
import { DeleteOutline, PlusOutline } from '@ant-design/icons-angular/icons';

const icons: IconDefinition[] = [ DeleteOutline, PlusOutline ];

Object.keys(antDesignIcons).map(key => antDesignIcons[key])

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzIconModule,
  ],
  providers: [
    { provide: NZ_ICONS, useValue: icons }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载请注明出处,尊重他人劳动成果。
本文链接:https://www.hakadao.top/develop/1212.html
首页      开发      【ant design 的坑】ERROR Error: [@ant-design/icons-angular]:the icon *** does not exist or is not registered.的解决方式

发表评论

textsms
account_circle
email

Hakadao's Blog

【ant design 的坑】ERROR Error: [@ant-design/icons-angular]:the icon *** does not exist or is not registered.的解决方式
文章特色图片:RAIN DAY 官方文档真的睿智得要死,重要的放在最后面,还没有太特别明显的标注 事情起因 最近某个作业要用到ant design去完成,当使用到上传插件时,出现了一个问…
扫描二维码继续阅读
2020-01-31