RouterModule.forRoot called twice

Question

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.

score 161 · Answer 1 · answered Jun 22 '18 at 20:20

161

I got this error because I somehow accidentally imported the root AppModule into my lazy-loaded module. This caused the root AppRoutingModule to be called again when the lazy-loaded module was loaded, and thus RouterModule.forRoot was called twice.

If you are certain you aren't calling RouterModule.forRoot twice then this could be the cause of the issue. Check that you aren't importing any modules in your lazy-loaded module that direcly call RouterModule.forRoot or import a module that calls RouterModule.forRoot.

answered Jun 22 '18 at 20:20

inorganik

24,255
17
90
114

5

It means, when you create a feature module inside a feature module, you might need an extra shared module. For instance, you have a RegisterModule with all stuff related to registration, and an SmsRegisterModule, which has some rarely used stuff so you want it to load lazily. But SmsRegisterModule might be using some components from RegisterModule. If you just import parent module inside its child, you gonna have a "called twice" problem. So you create a SharedRegisterModule, in which you put components used in both RegisterModule and SmsRegisterModule. And import SharedRegisterModule in both. – Anton Rusak Sep 24 '18 at 14:56
1

Thanks. Fixed. I got this error because I somehow accidentally imported the root AppModule into my lazy-loaded module. – SUHAIL KC Dec 23 '19 at 07:25
2

Same in my case: AppModule got imported into my lazy-loaded module. I somehow have the feeling, that it was coded automatically with Intellij IDEA. Good answer, thank you! – Jochen Haßfurter Feb 09 '20 at 10:24
2

The "somehow" in my case was my IDE (WebStorm) trying to "intelligently" fix a pipe import. Pro tip: use a custom pipes module! – Alex Steinberg Apr 25 '20 at 19:03
Wow, how did I miss this? Thanks a bunch. – edwardbrosens May 11 '20 at 20:13
1

@edwardbrosens, in my case WebStorm imported it for me when I used a top-level pipe in a child component so it wasn't me but auto import magic gone wrong. – Tyrone Wilson Jun 02 '20 at 21:13
Fixed it. I happened to import the root `RouterModule` in the child's module too. Removing solved it like magic. – John Erbynn Jul 19 '20 at 07:48
Same reason for me. – Ojonugwa Jude Ochalifu Jan 27 '21 at 07:48
Had the same error but I found that AppModule was accidently imported to one the shared modules. Thanks ! – faye.babacar78 Jun 23 '21 at 18:44
Thank you! This was my issue as well – Артур Гудиев Nov 20 '21 at 07:58

score 33 · Answer 2 · answered Oct 15 '18 at 09:17

I've been struggling with this for a while. Finally found the issue.

I'm using lazy loading. And even though I'd only used .forRoot in one place in the app, the error suggested that I was using it twice.

Turned out that I was importing the AppRoutingModule from app.routing.ts file in one of the feature modules that was being lazy loaded. And I had done this earlier because it kept saying it didn't recognize routerLink which I had used in one of the components in that feature module.

The solution was to replace the AppRoutingModule import in the feature module with an import of the RouterModule from '@angular/router'. Now everything works.

PS - when I say feature module, I mean sub module that I'm lazy loading.

I find this very confusing. I'm getting the exact same problem RouterModule.forRoot() called twice since I'm importing AppRoutingModule in a SharedModule, and the SharedModule is also used in a Lazy loaded module. SharedModule has a breadcrumb component that uses the routerLink. Importing just RouterModule makes all work again. But this goes against Angular documentation: "RouterModule can be imported multiple times: once per lazily-loaded bundle. " https://angular.io/api/router/RouterModule#usage-notes — carraua, Jan 30 '20 at 11:48

score 14 · Answer 3 · answered Apr 05 '20 at 04:58

14

I have faced the problem too, and for the future comers, This is my solution.

Do not import AppRoutingModule in oer module, Import RoutingModule

It will be solved. Here is an example.

import { RouterModule } from '@angular/router';

And in the imports array

  @NgModule({

 declaration: [], // your contents
 imports: [
  RouterModule,
  // Other modules
 ]
  })

answered Apr 05 '20 at 04:58

Abhishek Soni

563
1
6
17

I was dealing with the same components in multiple modules as selection as well as routes, and this solves my issue. Thank you. – Alexis May 31 '20 at 00:17
This is the fix for my issue. Thanks – Isuru Dilshan Aug 31 '20 at 10:29

score 8 · Answer 4 · answered Apr 05 '18 at 10:38

8

In your separate lazily loaded modules, OverviewModule, SearchModule, PolicyModule, ClaimModule and SettingsModule do you have routes declared in them? If so, in the @NgModule of each do you have a RouterModule.forRoot() somewhere? They should be RouterModule.forChild(...). It sounds like that could be the issue.

answered Apr 05 '18 at 10:38

rrd

5,789
3
28
36

Yes, each module I.E. OverviewModule has its own overview-routing.module.ts file which inside contains a RouterModule.forChild() – Ben Clarke Apr 05 '18 at 10:44

score 8 · Answer 5 · answered Feb 28 '20 at 11:07

8

instead of using

  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
     ],

use

 imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
     ],

answered Feb 28 '20 at 11:07

score 7 · Answer 6 · answered Feb 17 '22 at 13:31

I know this is an old post but I recently encountered this issue because I was unknowingly importing AppModule into a child module.

My IDE had I pop-up I clicked unintentionally and that added AppModule to my imports. Something to search for if you encounter this problem!

score 6 · Answer 7 · answered May 26 '20 at 17:07

6

Convert the routing module from

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })

to

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

that will solve the error

answered May 26 '20 at 17:07

sanjay

695
11
22

1

Perfect solution – Victor.Uduak Aug 13 '21 at 19:04

score 3 · Answer 8 · answered Feb 01 '21 at 04:41

3

I got this error when I mistakenly named the route module of my lazy loaded module AppRoutingModule.

I renamed to match the module name eg StockRoutingModule and it was fixed.

answered Feb 01 '21 at 04:41

Winnipass

904
11
22

score 2 · Answer 9 · edited Mar 15 '19 at 10:10

2

Use RouterModule.forChild(routes) inside child module. Like this file ../../application/overview/overview.module.

If you have more child modules then use RouterModule.forChild(yourarray) instead of RouterModule.forRoot(yourarray)

edited Mar 15 '19 at 10:10

Nicholas K

15,148
7
31
57

answered Aug 17 '18 at 09:38

Bhumika Barad

101
1
5

score 2 · Answer 10 · answered Jan 28 '20 at 13:57

I've faced this issue because I use RouterModule.forRoot(myRoutes) inside my child module which I lazy-loaded. It should've been

@NgModule({
  imports: [ RouterModule.forChild(myRoutes) ], // changed forRoot with forChild
  exports: [ RouterModule ]
})

score 0 · Answer 11 · answered Sep 07 '18 at 06:00

You don't import RouterModule into your SharedModule. You import RoutingModule there. And this module imports RouterModule with forRoot which is called second time when lazy loading it. This causes the error.

Instead you should import RouterModule directly if you need redirects.

shared.module.ts

@NgModule({
  imports: [
  CommonModule,
  MaterialModule,
  RouterModule, /* NOT RoutingModule */
  FormsModule,
  CalendarModule,
  AgmCoreModule,
  FroalaEditorModule,
  FroalaViewModule,
  PdfViewerModule
],

score 0 · Answer 12 · answered Feb 03 '19 at 14:41

0

I was also facing the same while using lazy loading. Finally i have found some solution.

I have removed "routingModule" and "routerModule" from sharedModule and using routerModule only in respective routing.module.ts file.

answered Feb 03 '19 at 14:41

sharad jain

1,471
13
9

score 0 · Answer 13 · edited Dec 09 '19 at 20:24

0

In my case the issue was that I had forgotten to add the type when declaring my routes array in the feature module, If you have made sure that forRoot is not called twice and neither is AppRoutingModule imported multiple times you can check for basic mistakes like the one I made.

It was defined as:

const feature_routes = [.....];

instead of:

const feature_routes : Routes = [.....];

edited Dec 09 '19 at 20:24

סטנלי גרונן

2,917
23
46
68

answered Dec 09 '19 at 19:46

Sade Le

1

score 0 · Answer 14 · edited Apr 29 '22 at 13:07

0

In my case I used forRoot(routes) in App Modules and all other modules as well.

To get rid of this error I just put forRoot(route) in App module and changed all other modules to forChild(routes).

That's it. It works for me amazingly!

edited Apr 29 '22 at 13:07

Eric Aya

69,473
35
181
253

answered Apr 29 '22 at 12:49

Naveen

43
6

score 0 · Answer 15 · answered May 02 '22 at 21:57

I think I've got the solution to this problem. In the shared.module.ts file you added RoutingModule to the array of imports and again in the app.module.ts file you imported both the SharedModule (which already contains the RoutingModule) and the RoutingModule.

Simply remove the RoutingModule from the imports: array in the shared.module.ts file.

score 0 · Answer 16 · answered Jun 29 '22 at 15:40

***app.module.ts***

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouterModule } from '@angular/router';
    import { AppRoutingModule } from './app-routing.module'
     
    import { SessionManagementStorageRoutingModule } from './sessionmagement/sessionmanagement-routting.module';
    
    @NgModule({
      declarations: [
        AppComponent,
        ErrorComponent,
        Covid19Component,
      ],
      imports: [
        BrowserModule,
        RouterModule,
        AppRoutingModule,
        HttpClientModule,
        MatTableModule,
        // FormsModule,
       InMemoryWebApiModule.forRoot(TestData),
       SessionManagementStorageRoutingModule
      ],
      providers: [CustompreloadingstartegyService, CustompreloadingdelaystartegyService, Covid19Service
        // BookService
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {
      constructor() {
        console.log('App module called');
      }
    }


**app-routing.module.ts**

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
import { CustompreloadingstatregybookserviceService } from './service/custompreloadingstatregybookservice.service';

const routes: Routes = [
  { path: 'company', loadChildren: () => import('./company/company-module').then((x) => x.ComapanyModule), data:{preload:true} },
  { path: 'login', loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule), data:{preload:true, delay:true}},
  { path: 'covid19', component:Covid19Component },
  { path: 'book', loadChildren : ()=> import ('./book/book.module').then((module)=>module.BookModule), data:{preload:true, delay:true}},
  { path: 'sessionmanagement', loadChildren:()=> import ('./sessionmagement/sessionmagement.module').then((x)=>x.SessionmagementModule) },
  { path: '**', component: ErrorComponent }
 ];

@NgModule({
  imports: [RouterModule.forRoot(routes,
    {
      preloadingStrategy: CustompreloadingstatregybookserviceService
    }
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Sessionmagement-routing.Module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { LocalvssessionStorageComponent } from "./localvssession-storage/localvssession-storage.component";
import { SessionmagementComponent } from "./sessionmagement.component";
import { SessionvslocallStorageComponent } from "./sessionvslocall-storage/sessionvslocall-storage.component";

const routes: Routes = [{
    path:'',
    component:SessionmagementComponent,
    children:[{
        path: 'local', 
        component:LocalvssessionStorageComponent
    },
    {
        path:'session', 
        component:SessionvslocallStorageComponent
    }
]
}];

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

export class SessionManagementStorageRoutingModule {}






***Sessionmagement.Module.ts***

@NgModule({
  declarations: [
    SessionmagementComponent,
    LocalvssessionStorageComponent,
    SessionvslocallStorageComponent
  ],
  imports: [
    CommonModule,
    AppRoutingModule  /// This is the main cause of error => please replay with route module.. 
  ],
  exports: [
    SessionmagementComponent
  ]
})
export class SessionmagementModule { }

In my case what is did I replaced the AppRoutingModule with RouterModule in the SessionmagementModule.module.ts

**** Please check the example thoroughly.

RouterModule.forRoot called twice

app-module.ts

app-routing.ts

shared.module.ts

16 Answers16

Linked