angularjs - Error al ejecutar 'define' en 'CustomElementRegistry' al usar ClarityIcons

En mi aplicación quiero usar ClarityIcons.add() para añadir un icono personalizado. Sin embargo, obtengo el siguiente error:

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)

Intenté reproducirlo en un stackblitz, pero allí funcionó bien. En otras preguntas leí sobre eliminar el package-lock.json y luego reinstalar los módulos de node. Intenté esto, pero todavía obtengo el mismo resultado. ¿Alguna idea de dónde podría estar el error?

Respuesta #1

Parece que de alguna manera estás incluyendo los íconos de Clarity dos veces en tu aplicación. Normalmente, esto puede ocurrir si incluyes el clr-icons.min.js precompilado y también agrupas la biblioteca de íconos como parte de tu propio paquete de JS.

Dado que llamas a ClarityIcons.add(), supongo que import { ClarityIcons } from "@clr/icons";. Si haces esto, querrás eliminar clr-icons.min.js de tu index.html y seguir la sección "Cargar la API de Clarity Icons y los conjuntos de iconos en Typescript" en la documentación: https://vmware.github.io/clarity/icons/clarity-icons