组件是 2 个模块声明的一部分

Question

大家好我有这个错误我不知道如何解决它:

键入 ClientsParComponent 时出错 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/clients-par.component.ts 是 2 个模块声明的一部分：ClientModule in C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/client.module.ts 和 AppModule 在 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/app.module.ts! 请考虑将 ClientsParComponent 移入 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/clients-par.component.ts 到导入 ClientModule 的更高模块 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/client.module.ts 和 AppModule 在 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/app.module.ts. 你还可以创建一个新的 NgModule 来导出和包含 C:/Users/pc/Documents/GitHub/livrte 中的 ClientsParComponent 一个新的导出并包含 ClientsParComponent 的 NgModule C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/clients-par.component.ts 然后导入那个 NgModule 在 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/components/clients-par/client.module.ts 中的 ClientModule 中和 AppModule 在 C:/Users/pc/Documents/GitHub/livraison-app/angular/src/app/app.module.ts.

这是我的客户端模块；

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 { }

这是我的项目的样子：

我的客户端生根模型：

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 { }

我的组件：

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;
  }
    }

我的应用程序。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 { }

我的应用程序生根模型：

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

这个问题主要发生在一个组件在两个不同的模块中声明时。在您的情况下，您在 app.module.ts 甚至 client.module.ts.

中声明 ClientsParComponent

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

额外信息：由于在 app-routing.module.ts 中您已经在执行延迟加载，因此您也可以从导入中删除 ClientsParComponent。

组件是 2 个模块声明的一部分

Component is part of the declarations of 2 modules

typescript

angular-module

angular