angular - Angular，2个模块的错误声明，如何解决？

Question

当我运行ng serve应用程序时。

但是，当我运行时ng build --prod，它给了我一个错误footerComponent，说我已经在 2 个模块中声明了它。这怎么可能？

这是完整的错误：

ERROR in Type FooterComponent in C:/Users/matte/Documents/GitHub
  /latavolaitaliana/Sito Ufficiale/FE/latavolaitaliana/src/app/footer
  /footer.component.ts is part of the declarations of 2 modules: 

AppModule in C:/Users/matte/Documents/GitHub/latavolaitaliana/Sito Ufficiale
    /FE/latavolaitaliana/src/app/app.module.ts and FooterModule in 
    C:/Users/matte/Documents/GitHub/latavolaitaliana/Sito Ufficiale/FE/latavolaitaliana
    /src/app/footer/footer.module.ts!
Please consider moving FooterComponent in C:/Users/matte/Documents
    /GitHub/latavolaitaliana/Sito Ufficiale/FE/latavolaitaliana/src/app/footer
    /footer.component.ts to a higher module that imports AppModule in
     C:/Users/matte/Documents/GitHub/latavolaitaliana/Sito Ufficiale/FE/latavolaitaliana
    /src/app/app.module.ts and FooterModule in C:/Users/matte/Documents/GitHub
    /latavolaitaliana/Sito Ufficiale/FE/latavolaitaliana/src/app/footer
    /footer.module.ts.
You can also create a new NgModule that exports and includes FooterComponent
    in C:/Users/matte/Documents/GitHub/latavolaitaliana/Sito Ufficiale/F/latavolaitaliana
    /src/app/footer/footer.component.ts then import that NgModule in AppModule in C:/Users/matte
    /Documents/GitHub/latavolaitaliana/Sito Ufficiale/FE
    /latavolaitaliana/src/app/app.module.ts and FooterModule in C:/Users/matte
    /Documents/GitHub/latavolaitaliana/Sito Ufficiale/FE/latavolaitaliana/src/app/footer/footer.module.ts.

这是footer.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './footer.component';
import { Routes, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

const routes: Routes = [
  {
    path: '',
    component: FooterComponent
  }
];

@NgModule({
  declarations: [FooterComponent],
  imports: [NgbModule,RouterModule.forChild(routes)],
})

export class FooterModule { }
`

这是app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,

  ],
  imports: [
    BrowserModule,
    HomeModule,
    FiverulesModule,
    ContactModule,
    RegisterModule,
    LoginPageModule,
    NewsletterModule,
    FytModule,
    EventModule,
    ZuggModule,
    VdgModule,
    CibourModule,
    MdaModule,
    BlogModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    HttpClientModule,  
    AppRoutingModule
  ],
  providers: [
    {  
      provide:HTTP_INTERCEPTORS, useClass:BasicAuthHtppInterceptorService, multi:true 
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }`

标签： angularangular-routingbuild-errorangular-moduleng-build

Answer 1

您已经FooterComponent在两者中声明了footer.module.tsand app.module.ts（请参阅装饰器declarations内部的属性）。@NgModule

仅在一个模块中声明组件。如果需要在两个模块中共享，建议在外部模块中声明它。

我认为，FooterComponent需要从footer.module.ts. 由于HeaderComponent在中声明，app.module.ts我假设FooterComponent也不需要在中声明app.module.ts。

页脚.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './footer.component';
import { Routes, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

const routes: Routes = [
  {
    path: '',
    component: FooterComponent
  }
];

@NgModule({
  imports: [NgbModule,RouterModule.forChild(routes)],
})

export class FooterModule { }

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,

  ],
  imports: [
    BrowserModule,
    HomeModule,
    FiverulesModule,
    ContactModule,
    RegisterModule,
    LoginPageModule,
    NewsletterModule,
    FytModule,
    EventModule,
    ZuggModule,
    VdgModule,
    CibourModule,
    MdaModule,
    BlogModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    HttpClientModule,  
    AppRoutingModule
  ],
  providers: [
    {  
      provide:HTTP_INTERCEPTORS, useClass:BasicAuthHtppInterceptorService, multi:true 
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }