title: Importing a lot of modules in Angular
body: <p>I'm building an app with Angular 4 and Angular Material, each Material directive requires me to import its module separately..</p>
  
  <p>For example, i'm building a navigation bar, this is how the <code>nav.module.ts</code> starts to look like:</p>
  
  <pre><code>import {NgModule} from '@angular/core';
  import {CommonModule} from '@angular/common';
  import {NavComponent} from './nav.component';
  import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
  import { MdInputModule } from '@angular/material';
  import { MdMenuModule } from '@angular/material';
  import {MdButtonModule} from '@angular/material';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import {HttpClientModule, HttpClient} from '@angular/common/http';
  import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
  import {TranslateHttpLoader} from '@ngx-translate/http-loader';
  
  @NgModule({
  imports: [
      CommonModule,
      AngularFontAwesomeModule,
      MdInputModule,
      MdMenuModule,
      MdButtonModule,
      FlexLayoutModule,
      HttpClientModule,
  
      ....
  </code></pre>
  
  <p>There are only 3 Material modules right now, i will need to add more later and except Material, there are also other modules that need to be imported...</p>
  
  <p>Just started moving from AngularJS to Angular4 it feels to me like i'm doing something wrong... Is there a better way to import all the modules? Is my approach to structuring the app is wrong?</p>