ERROR in : 'clr-icon' is not a known element:

Question

Running the following command:

ng build --prod --base-href ./

I get:

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

I'm on Angular 7 and Clarity 1.04.

Extract from my 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"
        ]

Any ideas for how I can debug?

score 4 · Answer 1 · answered Jan 24 '19 at 23:25

4

clr-icon is a custom element but you probably know this.

Can you try adding this to your polyfills.ts file ( it should be at the same level as the app/ directory if you generated with the AngularCLI tool.

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

Then, strip down the scripts array in your angular.json file be empty and see if it builds. If it does start putting the other scripts listed scripts (minus this: "node_modules/@clr/icons/clr-icons.min.js" and this: "node_modules/@webcomponents/custom-elements/custom-elements.min.js",) one by one to make sure they aren't causing any issues.

answered Jan 24 '19 at 23:25

hippeelee

1,788
1
10
21

I added those 2 lines to polyfills, and removed ALL scripts from angular.json, same result :-/ – Allan Bowe Jan 24 '19 at 23:41
how did you generate your project and add Clarity to it? – hippeelee Jan 24 '19 at 23:43
1

This happens when you have a Clarity icon but haven't included the Clarity Icons NgModule in your module. Perhaps you are building your project and including very specific modules? If so, you can just use `ClarityModule` instead in all of your NgModules to avoid this. – Jeremy Wilken Jan 25 '19 at 01:19
Hurrah - that did it! I had a `mycustom.module.ts`, which DID have ClarityModule in the import statement but NOT in the `import` array of `NgModule`. Feel free to add as an answer! – Allan Bowe Jan 25 '19 at 07:56
thanks @hippeelee. The project is a very old one, that I'm trying to upgrade to Angular 7 - so wasn't built with a recent CLI unfortunately – Allan Bowe Jan 25 '19 at 08:03

score 4 · Answer 2 · answered Apr 10 '19 at 22:39

Import ClrIconModule to your app.module.ts or if you have specific module import it like example bellow.

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 {}

so you can use <clr-icon> in your component:

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>

in newer versions of Clarity it is called CdsIconModule, prefix changed from Clr to Cds in many cases... — Sevyls, Apr 22 '21 at 08:58

ERROR in : 'clr-icon' is not a known element:

2 Answers2

Linked