title: Angular - Using a component across multiple modules
body: <p><strong>What I'm using</strong></p>
  
  <ul>
  <li>Angular</li>
  </ul>
  
  <p><strong>What I'm trying to do</strong></p>
  
  <ul>
  <li>I have a loading component I want to reuse across multiple modules</li>
  </ul>
  
  <p><strong>What I've done</strong></p>
  
  <ul>
  <li><p>I've created a new module called 'loading-overlay'</p></li>
  <li><p>Inside this module I export the overlay component</p></li>
  <li><p>I add this module to app.module</p></li>
  <li><p>When adding the component to multiple modules I receive the following error:</p></li>
  </ul>
  
  <blockquote>
    <p>Type LoadingOverlayComponent is part of the declarations of 2 modules: LoadingOverlayModule and ProjectsModule! Please consider moving LoadingOverlayComponent to a higher module that imports LoadingOverlayModule and ProjectsModule. You can also create a new NgModule that exports and includes LoadingOverlayComponent then import that NgModule in LoadingOverlayModule and ProjectsModule.</p>
  </blockquote>
  
  <ul>
  <li>I've tried removing it from app.module and importing it into the other modules I need without much luck. I must be missing some obvious.</li>
  </ul>
  
  <p><strong>Overlay Module</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// Modules
  import { NgModule } from '@angular/core';
  
  // Components
  import { LoadingOverlayComponent } from './loading-overlay.component';
  
  
  
  @NgModule({
    declarations: [
      LoadingOverlayComponent,
    ],
  
    imports: [
  
    ],
  
    exports: [
      LoadingOverlayComponent
    ],
  
    providers: [ ],
  
  })
  
  export class LoadingOverlayModule { }
  </code></pre>
  
  <p><strong>App Module</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  // Routing
  import { AppRouting } from './routing/app-routing';
  
  // Modules
  import { ProjectsModule } from './projects/projects.module';
  import { UserModule } from './user/user.module';
  import { LoadingOverlayModule } from './loading-overlay/loading-overlay.module';
  
  
  // Services / Providers
  import { AuthService } from './user/auth.service'
  
  
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      AppRouting,
      LoadingOverlayModule  
    ],
    providers: [
      AuthService,
  
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Project Module</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// Modules
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from '@angular/router';
  import { LoadingOverlayModule } from '../loading-overlay/loading-overlay.module';
  
  import { LoadingOverlayComponent } from '../loading-overlay/loading-overlay.component';
  
  
  
  
  
  
  @NgModule({
    declarations: [
  
      LoadingOverlayComponent
    ],
  
    imports: [
      CommonModule,
      RouterModule,
  
      LoadingOverlayModule
    ],
  
    providers: [ ],
  
  })
  
  export class ProjectsModule { }
  </code></pre>
  
  <p>Any help pointing out what I've stupidly missed would be greatly appreciated.</p>