title: Angular2 How to clean up the AppModule
body: <p>I've been using the tutorials online and created an 'ok' SPA data entry application.</p>
  
  <p>I have it connecting to my WEB API fine but have only built out one Model and already my AppModule has quiet a few lines.</p>
  
  <p>I'm thinking forward and using the current method I think the AppModule will be a crazy size once i finish with it, tough to read and possibly even tougher to debug.</p>
  
  <p>Have I possibly missed the point of how to structure an Angular2 larger application?</p>
  
  <p>I'm struggling to find a tutorial/project online that is larger than 1 component for reference.</p>
  
  <p>Below is my <code>app.module.ts</code> and folder structure.</p>
  
  <p>I separate my <code>CashMovement</code>, <code>ListComponent</code> and <code>DataService</code> which I would think is good practice but add another 10 different data-services and lists and the app.module will be lengthy.</p>
  
  <p>Before I proceed any further does anybody please have some reading they could point me towards or advice which I understand is subjective to personal opinion.</p>
  
  <h2>app.module</h2>
  
  <pre class="lang-ts prettyprint-override"><code>import './rxjs-operators';
  
  import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { HttpModule }    from '@angular/http';
  
  import { PaginationModule, DatepickerModule, Ng2BootstrapModule, ModalModule, ProgressbarModule, TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
  
  import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-loading-bar';
  
  
  import { AppComponent }   from './app.component';
  import { DateFormatPipe } from './shared/pipes/date-format.pipe';
  import { HighlightDirective } from './shared/directives/highlight.directive';
  import { HomeComponent } from './home/home.component';
  import { MobileHideDirective } from './shared/directives/mobile-hide.directive';
  
  import { CashMovementListComponent } from './cashmovements/cashmovement-list.component';
  import { CashMovementDataService } from './cashmovements/cashmovement.data.service';
  
  import { routing } from './app.routes';
  
  import { ConfigService } from './shared/utils/config.service';
  import { ItemsService } from './shared/utils/items.service';
  import { MappingService } from './shared/utils/mapping.service';
  import { NotificationService } from './shared/utils/notification.service';
  
  @NgModule({
      imports: [
          BrowserModule,
          DatepickerModule,
          FormsModule,
          HttpModule,
          Ng2BootstrapModule,
          ModalModule,
          ProgressbarModule,
          PaginationModule,
          routing,
          TimepickerModule
      ],
      declarations: [
          AppComponent,
          DateFormatPipe,
          HighlightDirective,
          HomeComponent,
          MobileHideDirective,
          SlimLoadingBarComponent,
          CashMovementListComponent        
      ],
      providers: [
          ConfigService,
          CashMovementDataService,
          ItemsService,
          MappingService,
          NotificationService,
          SlimLoadingBarService
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <h2>Folder Structure</h2>
  
  <p><a href="https://i.stack.imgur.com/FnmYp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FnmYp.png" alt="enter image description here"></a></p>