RouterModule.forRoot called twice

I am trying to implement Lazy Loading into my application but seem to be coming across an issue whereby I get the error message :

Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
​

So I have my main app-routing.module.ts and also app-module.ts which looks like below:

app-module.ts


// 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 { }

app-routing.ts


// 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 { }


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.

shared.module.ts


// 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 { }


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.

Could anyone help me on this.

Continue reading...