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

Question

在我的应用程序中，我想使用 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)

我尝试在 stackblitz 中复制它，但效果很好。在其他问题中，我阅读了有关删除 package-lock.json 然后重新安装节点模块的信息。我试过了，但我仍然得到相同的结果。知道错误可能在哪里吗？

Answer 1

您似乎以某种方式在您的应用中包含了两次清晰度图标。通常，如果您包含预编译的 clr-icons.min.js 并将图标库捆绑为您自己的 JS 包的一部分，就会发生这种情况。

既然你叫ClarityIcons.add()，我猜你是import { ClarityIcons } from "@clr/icons";。如果这样做，您想从 index.html 中删除 clr-icons.min.js 并按照文档中的 "Load Clarity Icons API and icon sets in Typescript" 部分进行操作：https://vmware.github.io/clarity/icons/clarity-icons

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

Failed to execute 'define' on 'CustomElementRegistry' when using ClarityIcons

clarity

angularjs

typescript

vmware-clarity