简体   繁体   中英

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM