Angular 7.2-“组件是2个模块的声明的一部分”，但不是

Question

Updating from Angular 5.2 to Angular 7.2,

I have a component that is only used only once in a module

but as I "ng build --prod" the project, I get this error

ERROR in : Type GraphComponent in C:/myproject/src/app/widgets/graph/graph.component.ts is part of the declarations of 2 modules: 

DashBoardModule in C:/myproject/src/app/pages/dashBoard/dashBoard.module.ts and 
DashBoardModule in C:/myproject/src/app/pages/dashboard/dashBoard.module.ts

note that both modules are the same

I can't put my finger on what is wrong here, this is the component I import :

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

@Component({
    selector: 'my-graph',
    templateUrl: './graph.component.html',
    styleUrls: ['./graph.component.css'],
})
export class GraphComponent implements OnInit,OnChanges {
...
}

here is how I import the component in my module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule, FormBuilder } from '@angular/forms';

import { DashBoardComponent } from './dashBoard.component';
import { DashBoardService } from './dashBoard.service';
import { DashBoardRoutingModule } from './dashBoard.routing';

import { LoadingOverlayModule } from '../../widgets/loadingOverlay/loadingOverlay.module';
import { DataTableModule } from '../../widgets/dataTable/dataTable.module';
import { ERFormModule } from '../../widgets/erform/erform.module';

import { GraphComponent } from '../../widgets/graph/graph.component';

import { PageTitleService } from '../../widgets/pageTitle/pageTitle.service';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        DataTableModule,
        ERFormModule,
        DashBoardRoutingModule,
        LoadingOverlayModule
    ],
    declarations: [
        DashBoardComponent,
        GraphComponent
    ],
    providers: [DashBoardService, FormBuilder,PageTitleService],
})
export class DashBoardModule {}

Here is DashBoardRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashBoardComponent } from './dashBoard.component';

import { AuthGuardService } from '../../auth/authGuard.service';

const dashboardRoutes: Routes = [
    {
        path: 'dashBoard',
        component: DashBoardComponent,
        pathMatch: 'full',
        canActivate: [AuthGuardService],
    }
];
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class DashBoardRoutingModule {}

This should be (and was) working

is there some new consideration to take when importing a component in a module ?

regards

Answer 1

May be you have any unused or archived module in which DashboardComponent is also declared.

Because I see there are two modules dashboard and dashBoard . That is what the error says.

Answer 2

DashBoardModule in C:/myproject/src/app/pages/ dashBoard /dashBoard.module.ts and DashBoardModule in C:/myproject/src/app/pages/ dashboard /dashBoard.module.ts

dashBoard and dashboard are not the same, change them to have only one version (the name of the folder)