ОШИБКА в: 'clr-icon' не известен элемент: - PullRequest
Новая
       13

ОШИБКА в: 'clr-icon' не известен элемент:

0 голосов
/ 25 января 2019

Выполнение следующей команды:

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

Любые идеи о том, как я могу отладить?

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Импорт 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 {}

, чтобы вы могли использовать <clr-icon> в своем компоненте:

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>
0 голосов
/ 25 января 2019

clr-icon - это пользовательский элемент, но вы, вероятно, знаете это.

Можете ли вы попробовать добавить это в файл polyfills.ts (он должен быть на том же уровне, что и каталог app/, если вы создали инструмент AngularCLI. 

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

Затем, уберите массив scripts в вашем файле angular.json, чтобы он был пустым, и посмотрите, собирается ли он. Если это действительно начинает помещать другие перечисленные сценарии сценарии (минус это: "node_modules/@clr/icons/clr-icons.min.js" и это: "node_modules/@webcomponents/custom-elements/custom-elements.min.js",) один за другим, чтобы убедиться, что они не вызывают никаких проблем.

...