Angular 14: error NG8001: 'app-horizontal-bar-chart' is not a known element:

Question

Can someone help me with this error? I have seen other possible solutions to solve this error but they have not worked.

Error: src/app/pages/home/home.component.html:5:9 - error NG8001: 'app-horizontal-bar-chart' is not a known element:

1. If 'app-horizontal-bar-chart' is an Angular component, then verify that it is part of this module.
2. If 'app-horizontal-bar-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5 ~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/pages/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent.

package.json

{
    "name": "goty",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
        "test": "ng test"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^14.0.0",
        "@angular/common": "^14.0.0",
        "@angular/compiler": "^14.0.0",
        "@angular/core": "^14.0.0",
        "@angular/forms": "^14.0.0",
        "@angular/platform-browser": "^14.0.0",
        "@angular/platform-browser-dynamic": "^14.0.0",
        "@angular/router": "^14.0.0",
        "@cds/core": "^6.1.4",
        "@clr/angular": "^13.8.2",
        "@clr/icons": "^13.0.2",
        "@clr/ui": "^13.8.2",
        "@swimlane/ngx-charts": "^20.1.0",
        "rxjs": "~7.5.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.0.0",
        "@angular/cli": "~14.0.0",
        "@angular/compiler-cli": "^14.0.0",
        "@types/jasmine": "~4.0.0",
        "jasmine-core": "~4.1.0",
        "karma": "~6.3.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.0.0",
        "karma-jasmine-html-reporter": "~1.7.0",
        "typescript": "~4.7.2"
    }
}

project structure

app.module.ts

**import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsModule} from './components/components.module';

import { HomeComponent } from './pages/home/home.component';
import { VoteComponent } from './pages/vote/vote.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    VoteComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ComponentsModule
    
    
  ],
  
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }**

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 

  constructor() { }

  ngOnInit(): void {
  }

}

home.component.html

<h2>Game of the year!!!</h2>
<hr>
<div class="row">
    <div class="col">
        <app-horizontal-bar-chart></app-horizontal-bar-chart>
    </div>
</div>

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

components.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import {  NgxChartsModule } from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

import { NavbarComponent } from './navbar/navbar.component';
import { HorizontalBarChartComponent } from './horizontal-bar-chart/horizontal-bar-chart.component';




@NgModule({
  declarations: [
    NavbarComponent,
    HorizontalBarChartComponent,
  
  ],
  exports: [
    NavbarComponent,
    HorizontalBarChartComponent,
    
  ],

  imports: [
    CommonModule,
    RouterModule,
    NgxChartsModule,
    BrowserAnimationsModule,
    

  

  ]
})
export class ComponentsModule { }

horizontal-bar-chart.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-horizontal-bar-chart',
  templateUrl: './horizontal-bar-chart.component.html',
  styleUrls: ['./horizontal-bar-chart.component.css']
})

export class HorizontalBarChartComponent {

  results: any[]=[
    {
      "name": "Game 1",
      "value": 25
    },
    {
      "name": "Game 2",
      "value": 37
    },
    {
      "name": "Game 3",
      "value": 42
    }
  ];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = true;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Games';
  showYAxisLabel = true;
  yAxisLabel = 'Votes';
  colorScheme = 'nightLights';

 
}

horizontal-bar-chart.component.html

<div class="chart-container">

    <ngx-charts-bar-horizontal [scheme]="colorScheme" [results]="results" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel"
        style="fill: grey">
    </ngx-charts-bar-horizontal>

</div>