my question is, Unexpected directive 'BarChartComponent' imported by the module 'DashboardModule'. Please add a @NgModule annotation

Question

I'm getting an error while compiling the code as

Unexpected directive 'BarChartComponent' imported by the module 'DashboardModule'. Please add a @NgModule annotation.

    dashboard.module.ts

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

    import { DashboardComponent } from "./dashboard.component";
    import { SharedModule } from "../shared";
    import { ChartsService } from "../shared/chart.service";

    import {BarChartComponent} from "../bar-chart/bar-chart.component";
    const dashboardRouting: ModuleWithProviders = RouterModule.forChild([
      {
        path: "",
        component: DashboardComponent
      }
    ]);

    @NgModule({
      imports: [CommonModule, dashboardRouting, SharedModule, BarChartComponent],
      declarations: [DashboardComponent],
      providers: [ChartsService],

    })
    export class DashboardModule {}

Answer 1

The issue is with import of BarChartComponent into imports array. You must declare the BarChartComponent instead. As of now Angular is treating BarChartComponent as Module.

It should be as -

@NgModule({
  imports: [CommonModule, dashboardRouting, SharedModul],
  declarations: [DashboardComponent, BarChartComponent], //<-- move here
  providers: [ChartsService],

})
export class DashboardModule {}