error NG8001: 'clr-wizard-page' is not a known element

I having this issue by adding the Clarity UI Wizard component.

Error:

Error occurs in the template of component ConfigsComponent. src/app/configs/configs.component.html:19:5 - error NG8001: 'clr-wizard-page' is not a known element: 1. If 'clr-wizard-page' is an Angular component, then verify that it is part of this module. 2. If 'clr-wizard-page' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

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

Solution

One rule of thumb whenever you experience this error is

All components must either be declared in the same module where they are used or imported in a module that exports them

So basically the error says that clr-wizard-page is not a known element, so the solution is to simply import the module where ConfigsComponent is declared

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