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

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

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

由于您调用了 ClarityIcons.add()，我猜您是 import {ClarityIcons } from "@clr/icons";。如果这样做，您需要从 index.html 中删除 clr-icons.min.js 并按照“在 Typescript 中加载 Clarity Icons API 和图标集”部分进行操作在文档中:https://vmware.github.io/clarity/icons/clarity-icons