Currently, I am in the process of developing an application using Angular 4 and Angular Material. Each Material directive necessitates importing its module individually.
For instance, when working on a navigation bar, the nav.module.ts file begins to take shape as follows:
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,
....
Currently, there are only three Material modules included, but I anticipate having to add more in the future. Apart from Material, there are additional modules that must also be imported...
Transitioning from AngularJS to Angular 4 has left me feeling like I might be approaching this setup incorrectly. Is there a more efficient way to import all the modules? Could my overall approach to organizing the application structure be improved?