title: RouterModule.forRoot called twice
body: <p>I am trying to implement Lazy Loading into my application but seem to be coming across an issue whereby I get the error message :</p>
  
  <blockquote>
    <p>Error: RouterModule.forRoot() called twice. Lazy loaded modules should
    use RouterModule.forChild() instead.</p>
  </blockquote>
  
  <p>So I have my main <strong>app-routing.module.ts</strong> and also <strong>app-module.ts</strong> which looks like below:</p>
  
  <h1>app-module.ts</h1>
  
  <pre><code>// External Dependencies
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  // Internal Dependencies
  import { MaterialModule } from '../app/configuration/material/material.module';
  import { SharedModule } from '../app/application/shared/shared.module';
  import { RoutingModule } from '../app/configuration/routing/routing.module';
  import { SettingsModule } from '../app/application/settings/settings.module';
  
  import { AppComponent } from './app.component';
  
  import { SearchService } from './application/shared/services/search.service';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserAnimationsModule,
      BrowserModule,
      SharedModule,
      RoutingModule,
      MaterialModule,
      HttpClientModule,
      FormsModule,
    ],
    providers: [ ],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <h1>app-routing.ts</h1>
  
  <pre><code>// External Dependencies
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule, Routes } from '@angular/router';
  import { HttpModule } from '@angular/http';
  
  const appRoutes: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'overview', loadChildren: '../../application/overview/overview.module#OverviewModule' },
    { path: 'search', loadChildren: '../../application/search/search.module#SearchModule' },  
    { path: 'policy/:id', loadChildren: '../../application/policy/policy.module#PolicyModule' },
    { path: 'claim/:id', loadChildren: '../../application/claim/claim.module#ClaimModule' },
    { path: 'settings', loadChildren: '../../application/settings/settings.module#SettingsModule' }
  ];
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forRoot(appRoutes)
    ],
    exports: [
      RouterModule
    ],
    declarations: []
  })
  
  export class RoutingModule { }
  </code></pre>
  
  <p>This works fine and the application correctly loads. The issue from here is that in the SharedModule it has come components to redirect the user using routerLink to a new page. </p>
  
  <h1>shared.module.ts</h1>
  
  <pre><code>// External Dependencies
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { CalendarModule } from 'primeng/calendar';
  import { AgmCoreModule } from '@agm/core';
  import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
  import { PdfViewerModule } from 'ng2-pdf-viewer';
  
  // Internal Dependencies
  import { MaterialModule } from '../../configuration/material/material.module';
  import { RoutingModule } from '../../configuration/routing/routing.module';
  
  import { NavbarTopComponent } from '../../application/shared/components/navbar-top/navbar-top.component';
  import { NavbarSideComponent } from './components/navbar-side/navbar-side.component';
  import { TemplateCardWComponent } from './components/template-card-w/template-card-w.component';
  import { FilterPipe } from './pipes/filter.pipe';
  import { StandardTableComponent } from './components/standard-table/standard-table.component';
  import { OrderPipe } from '../shared/pipes/order.pipe';
  import { ActionComponent } from './components/action/action.component';
  import { GoogleMapComponent } from './components/google-map/google-map.component';
  import { HtmlEditorComponent } from './components/html-editor/html-editor.component';
  import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
  import { KeyBindingPipe } from './pipes/key-binding.pipe';
  import { StandardEditTableComponent } from './components/standard-edit-table/standard-edit-table.component';
  
  @NgModule({
    imports: [
      CommonModule,
      MaterialModule,
      RoutingModule,
      FormsModule,
      CalendarModule,
      AgmCoreModule,
      FroalaEditorModule,
      FroalaViewModule,
      PdfViewerModule
    ],
    declarations: [
      NavbarTopComponent,
      NavbarSideComponent,
      TemplateCardWComponent,
      FilterPipe,
      StandardTableComponent,
      OrderPipe,
      ActionComponent,
      GoogleMapComponent,
      HtmlEditorComponent,
      PdfViewerComponent,
      KeyBindingPipe,
      StandardEditTableComponent
    ],
    exports: [
    ]
  })
  
  export class SharedModule { }
  </code></pre>
  
  <p>As you can see I am having to import the RouterModule. If I remove the RouterModule, the application will load but no re-direct. If I keep the RouterModule the application will cause the error at the top of the question.</p>
  
  <p>Could anyone help me on this.</p>