CODEWITHSUNDEEP
angularmodulelazy-evaluationangular-router
Heena Aggarwal
Heena Aggarwal

Reputation: 1

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

I m importing AppModule in Lazy loaded module which is creating error : Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgClockPickerLibModule } from 'ng-clock-picker-lib';
import { SharedDataService } from './services/shared-data.service';


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,  
    NgClockPickerLibModule,
    ...
  ],
  providers: [
    SharedDataService,
    ...
  ],
  exports: [
    NgClockPickerLibModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app routing module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'journalling', loadChildren: './Journalling/modules/journalling.module#JournallingModule' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [

  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

journalling module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JournallingRoutingModule } from './journalling-routing.module';
import { AppModule } from 'src/app/app.module';


@NgModule({
  imports: [
    CommonModule,
    JournallingRoutingModule,
    AppModule
  ],
  declarations: [ 
  ],
  providers: [
  ]
})
export class JournallingModule { }

journalling routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [  
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class JournallingRoutingModule { }

[Error RouterModule.forRoot() called twice. Lazy loaded module should use forChild() instead.][1] [1]: https://i.sstatic.net/yMDry.png

Upvotes: 0

Views: 4800

Answers (1)

Robert Dempsey
Robert Dempsey

Reputation: 458

journalling module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JournallingRoutingModule } from './journalling-routing.module';
import { AppModule } from 'src/app/app.module'; <--- remove this import

@NgModule({
  imports: [
    CommonModule,
    JournallingRoutingModule,
    AppModule // <--- remove this import
  ],
  declarations: [ 
  ],
  providers: [
  ]
})
export class JournallingModule { }

The problem is that you're importing the AppModule in your JournallingModule which causes RouterModule.forRoot() to be called twice. AppModule is your root module and should not be imported in child modules.

Upvotes: 3

Related Questions