angular5父子元件的使用,執行時不報錯,build時報錯:
阿新 • • 發佈:2018-11-14
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]