使用 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

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

既然你打电话ClarityIcons.add()，我猜你import { ClarityIcons } from "@clr/icons";。如果您这样做，您希望clr-icons.min.js从index.html文档中删除并遵循“在 Typescript 中加载 Clarity 图标 API 和图标集”部分：https ://vmware.github.io/clarity/icons/clarity-icons