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

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:
If 'app-horizontal-bar-chart' is an Angular component, then verify that it is part of this module.
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>