Angular 错误在：'；clr图标'；不是已知元素：

运行以下命令：

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")

---

有关于如何调试的想法吗？

clr图标是一个自定义元素，但您可能知道这一点

是否可以尝试将其添加到

polyfills.ts

文件中（如果使用AngularCLI工具生成，则该文件应与

app/

目录处于同一级别）

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

---

然后，将

angular.json

文件中的脚本数组剥离为空，并查看它是否生成。如果它确实开始放置列出的其他脚本脚本（减去以下内容：

“node\u modules/@clr/icons/clr icons.min.js”

和以下内容：

“node\u modules/@webcomponents/custom elements/custom elements.min.js”，

）逐个导入，以确保它们不会引起任何问题。

将

ClrIconModule

导入到

app.module.ts

中，或者如果您有特定的模块，请像下面的示例一样导入

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';
import { ClrIconModule } from '@clr/angular';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, RouterModule.forChild(routes), ClrIconModule]
})
export class HomeModule {}

因此，您可以在组件中使用

：

home.component.html

<div class="main-container">
  <header class="header header-6">
    <div class="branding">
      <clr-icon shape="vm-bug"></clr-icon>
      <span class="title">Project Clarity</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      ...
    </div>
    <nav class="sidenav">
      ...
    </nav>
  </div>
</div>

项目清晰度
...
...

我将这两行添加到polyfills中，并从angular.json中删除了所有脚本，结果相同：-/您是如何生成项目并为其添加清晰度的？如果您有一个清晰度图标，但没有在模块中包含清晰度图标，则会发生这种情况。也许您正在构建项目并包含非常特定的模块？如果是，您可以选择可以在所有NgModule中使用

ClarityModule

来避免这种情况。好极了！我有一个

mycustom.module.ts

，它在import语句中有ClarityModule，但在

NgModule

的

import

数组中没有。请随意添加作为答案！谢谢@hippeelee。该项目非常古老一个，我正在尝试升级到Angular 7-不幸的是，在Clarity的较新版本中，它不是用最新的CLI构建的，它被称为CdsIconModule，在许多情况下，前缀从Clr更改为Cds。。。

<div class="main-container">
  <header class="header header-6">
    <div class="branding">
      <clr-icon shape="vm-bug"></clr-icon>
      <span class="title">Project Clarity</span>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      ...
    </div>
    <nav class="sidenav">
      ...
    </nav>
  </div>
</div>