错误 NG8001：“clr-wizard-page”不是已知元素答案

【问题标题】：error NG8001: 'clr-wizard-page' is not a known element错误 NG8001：“clr-wizard-page”不是已知元素
【发布时间】：2020-12-26 23:47:28
【问题描述】：

我通过添加 Clarity UI 向导组件遇到了这个问题。

错误：

组件ConfigsComponent的模板发生错误。 src/app/configs/configs.component.html:19:5 - 错误 NG8001：'clr-wizard-page' 不是已知元素： 1. 如果 'clr-wizard-page' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“clr-wizard-page”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

configs.component.html

<clr-wizard #wizardConfig [(clrWizardOpen)]="wizardConfigOpen">
<clr-wizard-title>Wizard Beta</clr-wizard-title>

<clr-wizard-button [type]="'cancel'">Cancelar</clr-wizard-button>
<clr-wizard-button [type]="'previous'">Voltar</clr-wizard-button>
<clr-wizard-button [type]="'next'">Próximo</clr-wizard-button>
<clr-wizard-button [type]="'finish'">Finalizar</clr-wizard-button>

<clr-wizard-page>
    <ng-template clrPageTitle>Page 1</ng-template>
    ...
</clr-wizard-page>

<clr-wizard-page>
    <ng-template clrPageTitle>Page 2</ng-template>
    ...
</clr-wizard-page>

<clr-wizard-page>
    <ng-template clrPageTitle>Page 3</ng-template>
    ...
</clr-wizard-page>

configs.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {ClrWizard} from "@clr/angular";

@Component({
    selector: 'configs-app',
    templateUrl: './configs.component.html'
})
export class ConfigsComponent {
    
    @ViewChild("wizardConfig") wizardConfiguracoes: ClrWizard;

    wizardConfigOpen: boolean = false;
}

configs.modules.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConfigsComponent } from './configs.component';

@NgModule({
    declarations: [ ConfigsComponent ],
    imports: [ CommonModule ],
    exports: [ ConfigsComponent],
    providers: [],
})
export class ConfigsModule {}

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClarityModule } from "@clr/angular";
import { FlexLayoutModule } from '@angular/flex-layout';
import { NavBarComponent } from './navbar/navbar.component';
import { SimularModule } from './simular/simular.module';
import { ConfigsModule } from './configs/configs.module';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ClarityModule,
    FlexLayoutModule,
    SimularModule,
    ConfigsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

标签： angular typescript vmware-clarity

【解决方案1】：

当您遇到此错误时，一个经验法则是

所有组件必须要么在使用它们的同一模块中声明，要么在导出它们的模块中导入

所以基本上错误说clr-wizard-page不是已知元素，所以解决方案是简单地导入声明ConfigsComponent 的模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConfigsComponent } from './configs.component';

@NgModule({
    declarations: [ ConfigsComponent ],
    imports: [ CommonModule, ClarityModule  ], // <-- Added ClarityModule  here
    exports: [ ConfigsComponent],
    providers: [],
})
export class ConfigsModule {}

【讨论】：