javascript - Angular Lazy Loaded Modules Error - 'RouterModule.forRoot() called twice' - Stack Overflow

admin管理员组

文章数量:1297049

I'm implementing lazy-loaded feature modules into my angular 6 app, and have successfully configured one for an 'Invoices' feature, but I'm having issues implementing routing for the lazy-loaded 'Expenses' and 'Contacts' feature modules, which have been set up in the same way as the first.

Each module has been imported into the AppModule, and they also use a SharedModule, which I've imported into the AppModule and each feature module.

When routing to any of the pages using the 'Expenses' or 'Contacts' modules, I receive the following error in the console:

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead. Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead. at provideForRootGuard (vendor.js:106249)

I am using .forChild(routes) for the feature modules, but the only thing I can think of that may be causing this is tangled imports somewhere in the process. Based on previous questions regarding others having this issue, I have checked to see if the AppModule has been imported into any of the other modules, therefore causing forRoot() to be called twice, but this isn't the case.

With the error saying something to do with it being at provideForRootGuard, I thought it could be to do with CanActivateRootGuard being imported into each module, but removing this didn't solve the issue either.

AppRoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes, RouterLinkActive } from '@angular/router';
import { CanActivateRouteGuard } from './can-activate-route.guard';

// COMPONENTS
  // Dashboard
  import { DashboardComponent } from './dashboard/dashboardponent';
  // Login
  import { LoginComponent } from './login/loginponent';
  // Register
  import { RegisterComponent } from './register/registerponent';
  // Notifications
  import { NotificationsComponent } from './notifications/notificationsponent';
  // Bank
  import { BankComponent } from './bank/bankponent';
  // Documents
  import { DocumentsComponent } from './documents/documentsponent';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    ponent: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  },

  // Login/Register
  {
    path: 'login',
    ponent: LoginComponent
  },
  {
    path: 'register',
    ponent: RegisterComponent
  },

  // Notifications
  {
    path: 'notifications',
    ponent: NotificationsComponent,
    canActivate: [CanActivateRouteGuard]
  },
  {
    path: 'notifications/:id',
    ponent: NotificationsComponent,
    canActivate: [CanActivateRouteGuard]
  },

  // Bank
  {
    path: 'bank',
    ponent: BankComponent,
    canActivate: [CanActivateRouteGuard]
  },

  // Contacts
  {
    path: 'contacts',
    loadChildren: './contacts/contacts.module#ContactsModule'
  },

  // Expenses
  {
    path: 'expenses',
    loadChildren: './expenses/expenses.module#ExpensesModule'
  },

  // Invoices
  {
    path: 'invoices',
    loadChildren: './invoices/invoices.module#InvoicesModule'
  },

  // Documents
  {
    path: 'documents',
    ponent: DocumentsComponent,
    canActivate: [CanActivateRouteGuard]
  }
]

@NgModule ({

  imports: [
    RouterModule.forRoot(routes)
  ],

  exports: [
    RouterModule
  ]

})

AppModule

// ANGULAR CORE
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

// FEATURE MODULES
import { ContactsModule } from '@app/contacts/contacts.module';
import { ExpensesModule } from '@app/expenses/expenses.module';
import { InvoicesModule } from '@app/invoices/invoices.module';
import { BankModule } from '@app/bank/bank.module';
import { DocumentsModule } from '@app/documents/documents.module';

// MATERIAL MODULE
import { MaterialModule } from '@app/material.module';

// SHARED MODULE
import { SharedModule } from '@app/shared.module';

// COMPONENTS
import { AppComponent } from './appponent';
import { DashboardComponent } from './dashboard/dashboardponent'

// Account
import { LoginComponent } from './login/loginponent'
import { RegisterComponent } from './register/registerponent'
import { VerifyEmailDialogComponent } from './register/dialogs/verify-email-dialog/verify-email-dialogponent';

// Notifications
import { NotificationsComponent } from './notifications/notificationsponent';

@NgModule({

  declarations: [
    AppComponent,

    // COMPONENTS
        // Dashboard
        DashboardComponent,
        // Login
        LoginComponent,
        // Register
        RegisterComponent,
            // Dialogs
            VerifyEmailDialogComponent,
        // Notifications
        NotificationsComponent
  ],

  imports: [
    // ANGULAR CORE
    BrowserModule,
    BrowserAnimationsModule,

    // FEATURE MODULES
    InvoicesModule,
    ContactsModule,
    ExpensesModule,
    BankModule,
    DocumentsModule,

    // MATERIAL MODULE
    MaterialModule,

    // SHARED MODULE
    SharedModule
  ],

  entryComponents: [
    // DIALOGS  
        // Register
        VerifyEmailDialogComponent
  ],

  providers: [

  ],

  bootstrap: [AppComponent]
})

export class AppModule { }

ExpensesRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes, RouterLinkActive } from '@angular/router';
// import { CanActivateRouteGuard } from '@app/can-activate-route.guard';

// COMPONENTS
import { NewExpenseComponent } from './new-expense/new-expenseponent';
import { ExpenseListComponent } from './expense-list/expense-listponent';
import { ViewExpenseComponent } from './view-expense/view-expenseponent';

const routes: Routes = [
  {
    path: 'expenses/new',
    ponent: NewExpenseComponent,
    // canActivate: [CanActivateRouteGuard]
  },
  {
    path: 'expenses/all',
    ponent: ExpenseListComponent,
    // canActivate: [CanActivateRouteGuard]
  },
  {
    path: 'expenses/:id',
    ponent: ViewExpenseComponent,
    // canActivate: [CanActivateRouteGuard]
  },
]

@NgModule({

  imports: [
    RouterModule.forChild(routes)
  ],

  exports: [
    RouterModule
  ]

})

export class ExpensesRoutingModule {

}

ExpensesModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/mon';

import { ExpensesRoutingModule } from './expenses-routing.module';

// SHARED/MATERIAL MODULES
import { SharedModule } from '@app/shared.module';
import { MaterialModule } from '@app/material.module';

// COMPONENTS
    // New Expense
    import { NewExpenseComponent } from './new-expense/new-expenseponent';
    // Expense List
    import { ExpenseListComponent } from './expense-list/expense-listponent';
    // View Expense
    import { ViewExpenseComponent } from './view-expense/view-expenseponent';
    // Dialogs
    import { DeleteExpenseDialogComponent } from './view-expense/dialogs/delete-expense-dialog/delete-expense-dialogponent';

@NgModule({

  imports: [
    CommonModule,
    ExpensesRoutingModule,
    SharedModule,
    MaterialModule
  ],

  declarations: [
    // COMPONENTS
        // New Expense
        NewExpenseComponent,
        // Expense List
        ExpenseListComponent,
        // View Expense
        ViewExpenseComponent,
            // Dialogs
            DeleteExpenseDialogComponent
  ],

  entryComponents: [
    // DIALOGS
        // View Expense
        DeleteExpenseDialogComponent
  ]

})

export class ExpensesModule {

}

SharedModule Routing Imports

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/mon';

// ROUTING
import { AppRoutingModule } from './app-routing.module';
import { RouterLinkActive, CanActivate } from '@angular/router';
import { CanActivateRouteGuard } from './can-activate-route.guard';

...

I'm implementing lazy-loaded feature modules into my angular 6 app, and have successfully configured one for an 'Invoices' feature, but I'm having issues implementing routing for the lazy-loaded 'Expenses' and 'Contacts' feature modules, which have been set up in the same way as the first.

Each module has been imported into the AppModule, and they also use a SharedModule, which I've imported into the AppModule and each feature module.

When routing to any of the pages using the 'Expenses' or 'Contacts' modules, I receive the following error in the console:

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead. Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead. at provideForRootGuard (vendor.js:106249)

I am using .forChild(routes) for the feature modules, but the only thing I can think of that may be causing this is tangled imports somewhere in the process. Based on previous questions regarding others having this issue, I have checked to see if the AppModule has been imported into any of the other modules, therefore causing forRoot() to be called twice, but this isn't the case.

With the error saying something to do with it being at provideForRootGuard, I thought it could be to do with CanActivateRootGuard being imported into each module, but removing this didn't solve the issue either.

AppRoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes, RouterLinkActive } from '@angular/router';
import { CanActivateRouteGuard } from './can-activate-route.guard';

// COMPONENTS
  // Dashboard
  import { DashboardComponent } from './dashboard/dashboard.ponent';
  // Login
  import { LoginComponent } from './login/login.ponent';
  // Register
  import { RegisterComponent } from './register/register.ponent';
  // Notifications
  import { NotificationsComponent } from './notifications/notifications.ponent';
  // Bank
  import { BankComponent } from './bank/bank.ponent';
  // Documents
  import { DocumentsComponent } from './documents/documents.ponent';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    ponent: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  },

  // Login/Register
  {
    path: 'login',
    ponent: LoginComponent
  },
  {
    path: 'register',
    ponent: RegisterComponent
  },

  // Notifications
  {
    path: 'notifications',
    ponent: NotificationsComponent,
    canActivate: [CanActivateRouteGuard]
  },
  {
    path: 'notifications/:id',
    ponent: NotificationsComponent,
    canActivate: [CanActivateRouteGuard]
  },

  // Bank
  {
    path: 'bank',
    ponent: BankComponent,
    canActivate: [CanActivateRouteGuard]
  },

  // Contacts
  {
    path: 'contacts',
    loadChildren: './contacts/contacts.module#ContactsModule'
  },

  // Expenses
  {
    path: 'expenses',
    loadChildren: './expenses/expenses.module#ExpensesModule'
  },

  // Invoices
  {
    path: 'invoices',
    loadChildren: './invoices/invoices.module#InvoicesModule'
  },

  // Documents
  {
    path: 'documents',
    ponent: DocumentsComponent,
    canActivate: [CanActivateRouteGuard]
  }
]

@NgModule ({

  imports: [
    RouterModule.forRoot(routes)
  ],

  exports: [
    RouterModule
  ]

})

AppModule

// ANGULAR CORE
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

// FEATURE MODULES
import { ContactsModule } from '@app/contacts/contacts.module';
import { ExpensesModule } from '@app/expenses/expenses.module';
import { InvoicesModule } from '@app/invoices/invoices.module';
import { BankModule } from '@app/bank/bank.module';
import { DocumentsModule } from '@app/documents/documents.module';

// MATERIAL MODULE
import { MaterialModule } from '@app/material.module';

// SHARED MODULE
import { SharedModule } from '@app/shared.module';

// COMPONENTS
import { AppComponent } from './app.ponent';
import { DashboardComponent } from './dashboard/dashboard.ponent'

// Account
import { LoginComponent } from './login/login.ponent'
import { RegisterComponent } from './register/register.ponent'
import { VerifyEmailDialogComponent } from './register/dialogs/verify-email-dialog/verify-email-dialog.ponent';

// Notifications
import { NotificationsComponent } from './notifications/notifications.ponent';

@NgModule({

  declarations: [
    AppComponent,

    // COMPONENTS
        // Dashboard
        DashboardComponent,
        // Login
        LoginComponent,
        // Register
        RegisterComponent,
            // Dialogs
            VerifyEmailDialogComponent,
        // Notifications
        NotificationsComponent
  ],

  imports: [
    // ANGULAR CORE
    BrowserModule,
    BrowserAnimationsModule,

    // FEATURE MODULES
    InvoicesModule,
    ContactsModule,
    ExpensesModule,
    BankModule,
    DocumentsModule,

    // MATERIAL MODULE
    MaterialModule,

    // SHARED MODULE
    SharedModule
  ],

  entryComponents: [
    // DIALOGS  
        // Register
        VerifyEmailDialogComponent
  ],

  providers: [

  ],

  bootstrap: [AppComponent]
})

export class AppModule { }

ExpensesRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes, RouterLinkActive } from '@angular/router';
// import { CanActivateRouteGuard } from '@app/can-activate-route.guard';

// COMPONENTS
import { NewExpenseComponent } from './new-expense/new-expense.ponent';
import { ExpenseListComponent } from './expense-list/expense-list.ponent';
import { ViewExpenseComponent } from './view-expense/view-expense.ponent';

const routes: Routes = [
  {
    path: 'expenses/new',
    ponent: NewExpenseComponent,
    // canActivate: [CanActivateRouteGuard]
  },
  {
    path: 'expenses/all',
    ponent: ExpenseListComponent,
    // canActivate: [CanActivateRouteGuard]
  },
  {
    path: 'expenses/:id',
    ponent: ViewExpenseComponent,
    // canActivate: [CanActivateRouteGuard]
  },
]

@NgModule({

  imports: [
    RouterModule.forChild(routes)
  ],

  exports: [
    RouterModule
  ]

})

export class ExpensesRoutingModule {

}

ExpensesModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/mon';

import { ExpensesRoutingModule } from './expenses-routing.module';

// SHARED/MATERIAL MODULES
import { SharedModule } from '@app/shared.module';
import { MaterialModule } from '@app/material.module';

// COMPONENTS
    // New Expense
    import { NewExpenseComponent } from './new-expense/new-expense.ponent';
    // Expense List
    import { ExpenseListComponent } from './expense-list/expense-list.ponent';
    // View Expense
    import { ViewExpenseComponent } from './view-expense/view-expense.ponent';
    // Dialogs
    import { DeleteExpenseDialogComponent } from './view-expense/dialogs/delete-expense-dialog/delete-expense-dialog.ponent';

@NgModule({

  imports: [
    CommonModule,
    ExpensesRoutingModule,
    SharedModule,
    MaterialModule
  ],

  declarations: [
    // COMPONENTS
        // New Expense
        NewExpenseComponent,
        // Expense List
        ExpenseListComponent,
        // View Expense
        ViewExpenseComponent,
            // Dialogs
            DeleteExpenseDialogComponent
  ],

  entryComponents: [
    // DIALOGS
        // View Expense
        DeleteExpenseDialogComponent
  ]

})

export class ExpensesModule {

}

SharedModule Routing Imports

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/mon';

// ROUTING
import { AppRoutingModule } from './app-routing.module';
import { RouterLinkActive, CanActivate } from '@angular/router';
import { CanActivateRouteGuard } from './can-activate-route.guard';

...

• javascript
• angular
• lazy-loading
• angular-module

Share Improve this question Follow asked Jun 25, 2018 at 9:18 nick.cooknick.cook 2,14155 gold badges2020 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

FIX

Managed to fix this by removing the AppRoutingModule from the SharedModule and into the AppModule instead. All routes now working fine.

You are including your AppRoutingModule in the SharedModule.
and you load this shared module from your feature modules (like ExpensesModule)
So you are actually loading it twice.
To fix that, you have to take this out from the shared module. If you have any shared routes you like to keep, just separate it different files, keep the core Routes outside the shared module and include it with forRoot only to your main module.

本文标签： javascriptAngular Lazy Loaded Modules Error39RouterModuleforRoot() called twice39Stack Overflow