1. 程式人生 > >angular5父子元件的使用,執行時不報錯,build時報錯:

angular5父子元件的使用,執行時不報錯,build時報錯:

ERROR in : Type CompanyTreeComponent in D:/Project/ys-web1/src/app/system/manage/companyManage/companyTree/companyTree.component.ts is part of the declarations of 2 modules: CompanyMainModule in D:/Project/ys-web1/src/app/system/manage/companyManage/companyMain/companyMain.module.ts and CompanyTreeModule in D:/Project/ys-web1/src/app/system/manage/companyManage/companyTree/companyTree.Module.ts! Please consider moving CompanyTreeComponent in D:/Project/ys-web1/src/app/system/manage/companyManage/companyTree/companyTree.component.ts to a higher module that imports CompanyMainModule in D:/Project/ys-web1/src/app/system/manage/companyManage/companyMain/companyMain.module.ts and CompanyTreeModule in D:/Project/ys-web1/src/app/system/manage/companyManage/companyTree/companyTree.Module.ts. You can also create a new NgModule that exports and includes CompanyTreeComponent in D:/Project/ys-web1/src/app/system/manage/companyManage/companyTree/companyTree.component.ts then import that NgModule in CompanyMainModule in D:/Project/ys-web1/src/app/system/manage/companyManage/companyMain/companyMain.module.ts and CompanyTreeModule in D:/Project/ys-web1/src/app/system/manage/companyManage/companyTree/companyTree.Module.ts.

其中CompanyTreeCompant是子元件,CompanyMainComponent為父元件:

// 父元件
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TranslateModule} from '@ngx-translate/core';
import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
import { FileUploadModule } from 'ng2-file-upload';
import {CompanyMainRoutingModule} from './companyMain-routing.module';
import {CompanyMainComponent} from './companyMain.component';
import {AppService} from '../../../../app-service';
import {AppProperties} from '../../../../app.properties';
import {ModalModule, PaginationModule, TabsModule} from 'ngx-bootstrap';
import {FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import {NgxEchartsModule} from 'ngx-echarts';
import {CompanyTreeComponent} from '../companyTree/companyTree.component';

@NgModule({
  imports: [
    CommonModule,
    CompanyMainRoutingModule,
    TranslateModule,
    FileUploadModule,
    PaginationModule.forRoot(),
    ModalModule.forRoot(),
    FormsModule,
    NgbDropdownModule.forRoot(),
    ReactiveFormsModule,
    TabsModule.forRoot(),
    NgxEchartsModule,
  ],
  providers: [AppService, AppProperties],
  declarations: [CompanyMainComponent, CompanyTreeComponent]
})
export class CompanyMainModule {
}
// 子元件

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NgxEchartsModule} from 'ngx-echarts';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CompanyMainModule} from '../companyMain/companyMain.module';
import {CompanyTreeComponent} from './companyTree.component';

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgxEchartsModule,
  ],
  providers: [],
  declarations: [CompanyTreeComponent]
})
export class CompanyTreeModule {}

報錯原因: 聲明瞭兩次CompanyTreeComponent

解決方法: 把子元件的declarations去掉:declarations: [], 然後再imports父模組, imports: [CompanyMianModule]