angular5父子组件的使用,运行时不报错,build时报错:

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29532651/article/details/82736399
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]

猜你喜欢

转载自blog.csdn.net/qq_29532651/article/details/82736399