title: Angular, error declaration of 2 modules,, how solve it?
body: <p>When I run <code>ng serve</code> the application starts.</p>
  
  <p>However, when i run <code>ng build --prod</code>, it give me an error on <code>footerComponent</code> that says i have declared it in 2 modules. How is it possible?</p>
  
  <p>This is the full error:</p>
  
  <blockquote>
    <pre class="lang-none prettyprint-override"><code>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.
  </code></pre>
  </blockquote>
  
  <p>This is footer.module.ts: </p>
  
  <pre class="lang-js prettyprint-override"><code>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 { }
  `
  </code></pre>
  
  <p>This is <code>app.module.ts</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>@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 { }`
  </code></pre>