angular - : 'clr-icon' is not a known element: 中的错误

Question

运行以下命令:
ng build --prod --base-href ./
我得到:

ERROR in : 'clr-icon' is not a known element:
1. If 'clr-icon' is an Angular component, then verify that it is part of this module.
2. If 'clr-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("spinner spinner-sm spinner-inverse" [style.display]="loading ? 'inline-block' : 'none'"></span>
    [ERROR ->]<clr-icon clrSignpostTrigger shape="check" size="20" class="is-info" [style.display]="!loading && req")

我使用的是 Angular 7 和 Clarity 1.04。

摘自我的 angular.json :

        "styles": [
          "node_modules/@clr/icons/clr-icons.min.css",
          "node_modules/@clr/ui/clr-ui.min.css",
          "node_modules/prismjs/themes/prism-solarizedlight.css",
          "src/styles.css",
          "node_modules/lato-font/css/lato-font.min.css"
        ],
        "scripts": [
          "node_modules/core-js/client/shim.min.js",
          "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
          "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
          "node_modules/web-animations-js/web-animations.min.js",
          "node_modules/prismjs/prism.js",
          "node_modules/prismjs/components/prism-typescript.min.js",
          "node_modules/@clr/icons/clr-icons.min.js"
        ]

关于如何调试的任何想法？

Answer 1

clr-icon是一个自定义元素，但您可能知道这一点。

您可以尝试将此添加到您的 polyfills.ts 中吗？文件(如果您使用 AngularCLI 工具生成，它应该与 app/ 目录处于同一级别。

import '@webcomponents/custom-elements';
import '@clr/icons';

然后，去掉 angular.json 中的脚本数组文件为空，看看它是否构建。如果它确实开始将列出的其他脚本(减去此: "node_modules/@clr/icons/clr-icons.min.js" 和此: "node_modules/@webcomponents/custom-elements/custom-elements.min.js", )一一放置，以确保它们不会导致任何问题。