RouterModule.forRoot() 调用了两次。 延迟加载的模块应该使用 RouterModule.forChild() 代替

Question

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.stack.imgur.com/yMDry.png

Answer 1

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.