Component is part of the declarations of 2 modules

Question

Hi every one i have this erreur i don t knwo how to solve it :

• ERROR in Type ClientsParComponent in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/clients-par.component.ts is part of the declarations of 2 modules: ClientModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/client.module.ts and AppModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/app.module.ts! Please consider moving ClientsParComponent in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/clients-par.component.ts to a higher module that imports ClientModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/client.module.ts and AppModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/app.module.ts. You can also create a new NgModule that exports and includes ClientsParComponent in C:/Users/pc/Documents/GitHub/livrte a new NgModule that exports and includes ClientsParComponent in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/clients-par.component.ts then import that NgModule in ClientModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/client.module.ts and AppModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/app.module.ts.

this is my Client module ;

import { ClientSortableDirective } from './client-sortable.directive';
import { ClientsParComponent } from './clients-par.component';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ClientRoutingModule } from './client-routing.module';
import { UIModule } from 'src/app/shared/ui/ui.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { NgxMaskModule } from 'ngx-mask';
import { ClientparService } from '../services/clientpar.service';
import { NgbModule, NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { NgApexchartsModule } from 'ng-apexcharts';


@NgModule({
  declarations: [ClientsParComponent],
  imports: [
    FontAwesomeModule,
    CommonModule,
    NgApexchartsModule,
    UIModule,
    FormsModule,
    ReactiveFormsModule,
    CKEditorModule,
    NgxMaskModule.forRoot(),
    HttpClientModule,
    NgbModule,
    ReactiveFormsModule,
    ClientRoutingModule,
    NgbPaginationModule,
    NgbTypeaheadModule





  ],

  providers: [ClientparService],


})
export class ClientModule { }

this is how my project looks like :

My client rooting model :

import { ClientsProComponent } from './../clients-pro/clients-pro.component';
import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ClientsParComponent } from './clients-par.component';
import { AddClientComponent } from '../add-client/add-client.component';


const routes: Routes = [
  { path: 'clientpar', component: ClientsParComponent },
  { path: 'clientpro', component: ClientsProComponent },
  { path: 'addclient', component: AddClientComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ClientRoutingModule { }

My component:

import { ClientparService } from '../services/clientpar.service';
import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { Observable } from 'rxjs';
import { Table } from './client.model';
import { ClientSortableDirective, SortEvent } from './client-sortable.directive';
import { tableData } from './data';

@Component({
  selector: 'clientpar',
  templateUrl: './clients-par.component.html',
  styleUrls: ['./clients-par.component.scss'],
  providers: [ClientparService, DecimalPipe]
})
export class ClientsParComponent implements OnInit {

  objectKeys;
  breadCrumbItems: Array<{}>;

  // Table data
  tableData: Table[];

  tables$: Observable<Table[]>;
  total$: Observable<number>;

  @ViewChildren(ClientSortableDirective) headers: QueryList<ClientSortableDirective>;
  constructor(private cpars: ClientparService) {
    this.tables$ = cpars.tables$;
    this.total$ = cpars.total$;
  }

  getclientpar() {
    this.cpars.getclientpar().subscribe(clientp => {
      this.tables$ = clientp as any;
    });
  }

  ngOnInit(): void {
    // this.objectKeys = Object.keys;
    // this.getclientpar();



    // tslint:disable-next-line: max-line-length
    // this.breadCrumbItems = [{ label: 'Shreyu', path: '/' }, { label: 'Tables', path: '/' }, { label: 'Advanced', path: '/', active: true }];

    /**
     * fetch data
     */
    this._fetchData();
  }

  /**
  * fetches the table value
  */
  _fetchData() {
    this.tableData = tableData;
  }

  /**
  * Sort table data
  * @param param0 sort the column
  *
  */
  onSort({ column, direction }: SortEvent) {
    // resetting other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });
    this.cpars.sortColumn = column;
    this.cpars.sortDirection = direction;
  }
    }

My app.module.ts

import { NgbHighlight } from '@ng-bootstrap/ng-bootstrap';
import { ClientRoutingModule } from './components/clients-par/client-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, Component } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorInterceptor } from './core/helpers/error.interceptor';
import { JwtInterceptor } from './core/helpers/jwt.interceptor';
import { FakeBackendProvider } from './core/helpers/fake-backend';
import { LayoutsModule } from './layouts/layouts.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientsParComponent } from './components/clients-par/clients-par.component';
import { ClientsProComponent } from './components/clients-pro/clients-pro.component';
import { CommandesComponent } from './components/commandes/commandes.component';
import { LivreursComponent } from './components/livreurs/livreurs.component';
import { ResponsablesComponent } from './components/responsables/responsables.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AddClientComponent } from './components/add-client/add-client.component';
import { AddClientProComponent } from './components/add-client-pro/add-client-pro.component';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms'
import { FlatpickrModule } from 'angularx-flatpickr';
import { ClientdireDirective } from './components/clients-pro/clientdire.directive';
import { AddresponsableComponent } from './components/addresponsable/addresponsable.component';
import { EditresponsableComponent } from './components/editresponsable/editresponsable.component';
import { ProfilComponent } from './components/profil/profil.component';
import { FinancesComponent } from './components/finances/finances.component';
import { InventaireComponent } from './components/inventaire/inventaire.component';
import { AddlivreurComponent } from './components/addlivreur/addlivreur.component';
import { EditlivreurComponent } from './components/editlivreur/editlivreur.component';
import { BanqueComponent } from './components/banque/banque.component';
import { ClientSortableDirective } from './components/clients-par/client-sortable.directive';



@NgModule({
  declarations: [
    AppComponent,
    ClientsParComponent,
    ClientsProComponent,
    CommandesComponent,
    LivreursComponent,
    ResponsablesComponent,
    AddClientComponent,
    AddClientProComponent,
    ClientdireDirective,
    AddresponsableComponent,
    EditresponsableComponent,
    ProfilComponent,
    FinancesComponent,
    InventaireComponent,
    AddlivreurComponent,
    EditlivreurComponent,
    BanqueComponent,
    ClientSortableDirective,


  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    LayoutsModule,
    AppRoutingModule,
    FontAwesomeModule,
    ClientRoutingModule,
    FormsModule,
    FlatpickrModule.forRoot(),
    NgSelectModule








  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },


    // provider used to create fake backend
    FakeBackendProvider,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My App rooting model :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './core/guards/auth.guard';
import { LayoutComponent } from './layouts/layout.component';
import { ClientsParComponent } from './components/clients-par/clients-par.component';
const routes: Routes = [
  { path: 'account', loadChildren: () => import('./account/account.module').then(m => m.AccountModule) },
  // tslint:disable-next-line: max-line-length
  { path: '', component: LayoutComponent, loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule), canActivate: [AuthGuard] },
  { path: '', component: LayoutComponent, loadChildren: () => import('./components/clients-par/client.module').then(m => m.ClientModule), canActivate: [AuthGuard] },
  { path: '', component: LayoutComponent, loadChildren: () => import('./components/clients-pro/clientpro.module').then(m => m.ClientproModule), canActivate: [AuthGuard] },
  { path: '', component: LayoutComponent, loadChildren: () => import('./components/commandes/commandes.module').then(m => m.CommandesModule), canActivate: [AuthGuard] },
  { path: '', component: LayoutComponent, loadChildren: () => import('./components/livreurs/livreurs.module').then(m => m.LivreursModule), canActivate: [AuthGuard] },
  { path: '', component: LayoutComponent, loadChildren: () => import('./components/responsables/responsables.module').then(m => m.ResponsablesModule), canActivate: [AuthGuard] },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'top' }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

This issue basically occurs when a component is declared in 2 different modules. In your case you are declaring ClientsParComponent in app.module.ts and even in client.module.ts.

So if you remove the ClientsParComponent from the declarations of app.module.ts everything works as you expect.

Extra info: And since in app-routing.module.ts you are already doing the lazy loading, you can remove ClientsParComponent from the imports as well.