title: Component is part of the declarations of 2 modules
body: <p>Hi every one i have this erreur i don t knwo how to solve it :</p>
  <ul>
  <li><strong>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.</strong></li>
  </ul>
  <p>this is my Client module ;</p>
  <pre><code>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 { }
  </code></pre>
  <p>this is how my project looks  like :</p>
  <p><a href="https://i.stack.imgur.com/Ji6E0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ji6E0.png" alt="enter image description here" /></a></p>
  <p>My client rooting model :</p>
  <pre><code>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 { }
  </code></pre>
  <p><strong>My component:</strong></p>
  <pre><code>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&lt;{}&gt;;
  
    // Table data
    tableData: Table[];
  
    tables$: Observable&lt;Table[]&gt;;
    total$: Observable&lt;number&gt;;
  
    @ViewChildren(ClientSortableDirective) headers: QueryList&lt;ClientSortableDirective&gt;;
    constructor(private cpars: ClientparService) {
      this.tables$ = cpars.tables$;
      this.total$ = cpars.total$;
    }
  
    getclientpar() {
      this.cpars.getclientpar().subscribe(clientp =&gt; {
        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 =&gt; {
        if (header.sortable !== column) {
          header.direction = '';
        }
      });
      this.cpars.sortColumn = column;
      this.cpars.sortDirection = direction;
    }
      }
  </code></pre>
  <p>My app.module.ts</p>
  <pre><code>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 { }
  </code></pre>
  <p>My App rooting model :</p>
  <pre><code>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: () =&gt; import('./account/account.module').then(m =&gt; m.AccountModule) },
    // tslint:disable-next-line: max-line-length
    { path: '', component: LayoutComponent, loadChildren: () =&gt; import('./pages/pages.module').then(m =&gt; m.PagesModule), canActivate: [AuthGuard] },
    { path: '', component: LayoutComponent, loadChildren: () =&gt; import('./components/clients-par/client.module').then(m =&gt; m.ClientModule), canActivate: [AuthGuard] },
    { path: '', component: LayoutComponent, loadChildren: () =&gt; import('./components/clients-pro/clientpro.module').then(m =&gt; m.ClientproModule), canActivate: [AuthGuard] },
    { path: '', component: LayoutComponent, loadChildren: () =&gt; import('./components/commandes/commandes.module').then(m =&gt; m.CommandesModule), canActivate: [AuthGuard] },
    { path: '', component: LayoutComponent, loadChildren: () =&gt; import('./components/livreurs/livreurs.module').then(m =&gt; m.LivreursModule), canActivate: [AuthGuard] },
    { path: '', component: LayoutComponent, loadChildren: () =&gt; import('./components/responsables/responsables.module').then(m =&gt; m.ResponsablesModule), canActivate: [AuthGuard] },
  ];
  @NgModule({
    imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'top' }),
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>