title: Unexpected value 'LoginRoutingModule' imported by the module 'LoginModule'
body: <p>Hello as part of Angular 2 learning project I am creating a test app.</p>
  
  <p>I am trying to eagerly load one of the Module called LoginModule however I get following error 
  Unexpected value 'LoginRoutingModule' imported by the module 'LoginModule'</p>
  
  <p>I tried to refer other questions where error message is similar to above however nothing has helped me yet.</p>
  
  <p>It would be great if someone could help me solve the issue.</p>
  
  <p>My directory structure is as follows</p>
  
  <p><a href="https://i.stack.imgur.com/JLh9V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JLh9V.png" alt="enter image description here"></a></p>
  
  <p>login.module.ts is like this</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { LoginRoutingModule, loginRoutableComponents } from './login-routing.module';
  
  @NgModule({
      imports: [
          CommonModule,
          LoginRoutingModule ],
      declarations: [ loginRoutableComponents ],
  })
  export class LoginModule{ }
  </code></pre>
  
  <p>login-routing.module.ts is as follows</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { LoginComponent } from './login.component';
  
  const routes: Routes = [
      { path: 'login', component: LoginComponent }
  ];
  
  NgModule({
      imports: [ RouterModule.forChild(routes) ],
      exports: [ RouterModule ],
  })
  export class LoginRoutingModule{ }
  
  export const loginRoutableComponents = [
      LoginComponent
  ];
  </code></pre>
  
  <p>app.module.ts is as follows</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent }  from './app.component';
  
  import { ToastModule } from './core/toast/toast.module';
  import { ModalModule } from './core/modal/modal.module';
  import { SpinnerModule } from './core/spinner/spinner.module';
  
  import { CharacterModule } from './characters/character.module';
  import { DashboardModule } from './dashboard/dashboard.module';
  import { VehiclesModule } from './vehicles/vehicles.module';
  
  import { LoginModule } from './login/login.module';
  
  import { AppRoutingModule, appRoutableComponents } from './app-routing.module';
  
  @NgModule({
    imports:      [ BrowserModule,
                    FormsModule,
                    RouterModule,
                    ToastModule,
                    ModalModule,
                    SpinnerModule,
                    DashboardModule,
                    CharacterModule,
                    VehiclesModule,
                    LoginModule,
                    AppRoutingModule
                  ],
    declarations: [ AppComponent,
                    appRoutableComponents,
                  ],
    bootstrap:    [ AppComponent ],
  })
  export class AppModule { }
  </code></pre>
  
  <p>app-routing.module.ts is as follows</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { PageNotFoundComponent } from './page-not-found.component';
  const routes: Routes = [
      { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
      { path: '**', component: PageNotFoundComponent }
  ]
  
  
  @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
  })
  export class AppRoutingModule { }
  
  export const appRoutableComponents = [
      PageNotFoundComponent
  ];
  </code></pre>