使用ClarityIcons时无法在'CustomElementRegistry'上执行'define'

时间:2018-09-19 08:52:44

标签: angularjs typescript vmware-clarity clarity

在我的应用程序中,我想使用ClarityIcons.add()添加自定义图标。但是我收到以下错误:

index.js:402 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Object../src/clr-icons/index.ts (http://localhost:4200/vendor.js:84958:20)
    at __webpack_require__ (http://localhost:4200/vendor.js:84586:30)
    at ./src/clr-icons/clr-icons-api.ts.Object.defineProperty.value (http://localhost:4200/vendor.js:84635:18)
    at http://localhost:4200/vendor.js:84638:10
    at webpackUniversalModuleDefinition (http://localhost:4200/vendor.js:84564:20)
    at Object../node_modules/@clr/icons/index.js (http://localhost:4200/vendor.js:84566:3)
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at Module../src/app/core/components/core/core.component.ts (http://localhost:4200/main.js:1528:68)
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at Module../src/app/app.module.ts (http://localhost:4200/main.js:618:94)

我尝试以堆叠闪电的方式复制它,但是在这里效果很好。在其他问题中,我读到有关删除package-lock.json,然后重新安装节点模块的信息。我试过了,但结果还是一样。知道错误可能在哪里吗?

1 个答案:

答案 0 :(得分:2)

您似乎在某种程度上在应用程序中两次包含了“清晰度图标”。通常,如果包含预编译的clr-icons.min.js并将图标库作为您自己的JS包的一部分进行捆绑,则会发生这种情况。

由于您致电ClarityIcons.add(),所以我猜您是import { ClarityIcons } from "@clr/icons";。如果这样做,则要从clr-icons.min.js中删除index.html,并按照文档中的“在Typescript中加载清晰图标API和图标集”一节:https://vmware.github.io/clarity/icons/clarity-icons