title: Use component from AppModule in a child module in Angular X (X stands for 2+)
body: <p>I have created a small component (<code>LoadingComponent</code>) in the root of my application and declared it (obviously) in my <code>AppModule</code>. This component is used when my application is loading and should show some fancy loading animations.</p>
  
  <p>Now I want to use it in a child module when I save something. But I am always getting errors when I want to use this component in another module.</p>
  
  <p>I exported the LoadingComponent in my AppModule:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { ButtonsModule } from './buttons/buttons.module';
  import { FormsModule } from '@angular/forms';
  import { StatusLightsDisplayComponent } from './status-lights-display/status-lights-display.component';
  import { StatusLightsContainerComponent } from './status-lights-container/status-lights-container.component';
  import { HttpModule } from '@angular/http';
  import { ReportsService } from './services/reports.service';
  import { BrowserModule } from '@angular/platform-browser';
  import { forwardRef, NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { GeneralInformationComponent } from './general-information/general-information.component';
  import { TextfieldsComponent } from './textfields/textfields.component';
  import { LoadingComponent } from './loading/loading.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      GeneralInformationComponent,
      TextfieldsComponent,
      StatusLightsContainerComponent,
      StatusLightsDisplayComponent,
      LoadingComponent
    ],
    imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      ButtonsModule
    ],
    exports: [
      LoadingComponent
    ],
    providers: [
      ReportsService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The module I want to use the <code>LoadingComponent</code> is called <code>ButtonsModule</code>. So I tried to import the <code>AppModule</code> in my <code>ButtonsModule</code>. But I am getting the error: <code>Unexpected value 'undefined' imported by the module 'ButtonsModule'</code></p>
  
  <p>Here is my ButtonsModule:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { AppModule } from '../app.module';
  import { LoadingComponent } from '../loading/loading.component';
  import { BottomComponent } from './bottom/bottom.component';
  import { CalendarComponent } from './top/calendar/calendar.component';
  import { CommonModule } from '@angular/common';
  import { ExportService } from '../services/export.service';
  import { forwardRef, NgModule } from '@angular/core';
  import { FunctionsComponent } from './functions/functions.component';
  import { NavArrowsComponent } from './shared/nav-arrows/nav-arrows.component';
  import { SaveButtonComponent } from './shared/save-button/save-button.component';
  import { TopComponent } from './top/top.component';
  
  @NgModule({
    imports: [
      CommonModule,
      AppModule
    ],
    exports: [
      TopComponent,
      FunctionsComponent,
      BottomComponent
    ],
    declarations: [
      TopComponent,
      BottomComponent,
      FunctionsComponent,
      NavArrowsComponent,
      SaveButtonComponent,
      CalendarComponent
    ],
    providers: [
      ExportService
    ]
  })
  export class ButtonsModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I guess some of you already recognize some fail here :) But please read it to the end.</p>
  
  <p>I know the best practice here would be to create a shared module and then import this in my <code>AppModule</code>and the <code>ButtonsModule</code>, but this seems to be a little overkill, just for such a small component and it would also be my only shared module here. It would also create a lot of overhead.</p>
  
  <p>My questions:</p>
  
  <ul>
  <li>Am I doing something wrong here? If yes, what is it?</li>
  <li>Would be the way, by creating a shared module, the right one?</li>
  <li>Why is my approach not working? I mean, what is forbidding my approach under the hood of Angular and why?</li>
  </ul>