[英]Angular Lazy Loaded Modules Error - 'RouterModule.forRoot() called twice'
我正在我的angular 6應用程序中實現延遲加載的功能模塊,並已成功為“發票”功能配置了一個模塊,但是在為延遲加載的“費用”和“聯系人”功能模塊實現路由時遇到了問題,設置方法與第一種方法相同。
每個模塊都已導入到AppModule中,並且它們還使用了SharedModule,我已將其導入到AppModule和每個功能模塊中。
使用“費用”或“聯系人”模塊路由到任何頁面時,我在控制台中收到以下錯誤:
錯誤錯誤:未捕獲(承諾):錯誤:RouterModule.forRoot()被調用了兩次。 延遲加載的模塊應改用RouterModule.forChild()。 錯誤:RouterModule.forRoot()被調用了兩次。 延遲加載的模塊應改用RouterModule.forChild()。 在ProvideForRootGuard(vendor.js:106249)
我正在為功能模塊使用.forChild(routes),但我唯一想到的可能是導致此過程中某個位置的導入混亂。 基於先前關於其他人遇到此問題的問題,我檢查了AppModule是否已導入到其他模塊中,從而導致forRoot()被調用兩次,但實際情況並非如此。
由於錯誤提示在ProvideForRootGuard中與之相關,所以我認為這可能與將CanActivateRootGuard導入每個模塊有關,但是刪除它也不能解決問題。
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.component';
// Login
import { LoginComponent } from './login/login.component';
// Register
import { RegisterComponent } from './register/register.component';
// Notifications
import { NotificationsComponent } from './notifications/notifications.component';
// Bank
import { BankComponent } from './bank/bank.component';
// Documents
import { DocumentsComponent } from './documents/documents.component';
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [CanActivateRouteGuard]
},
// Login/Register
{
path: 'login',
component: LoginComponent
},
{
path: 'register',
component: RegisterComponent
},
// Notifications
{
path: 'notifications',
component: NotificationsComponent,
canActivate: [CanActivateRouteGuard]
},
{
path: 'notifications/:id',
component: NotificationsComponent,
canActivate: [CanActivateRouteGuard]
},
// Bank
{
path: 'bank',
component: 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',
component: DocumentsComponent,
canActivate: [CanActivateRouteGuard]
}
]
@NgModule ({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
應用模塊
// 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.component';
import { DashboardComponent } from './dashboard/dashboard.component'
// Account
import { LoginComponent } from './login/login.component'
import { RegisterComponent } from './register/register.component'
import { VerifyEmailDialogComponent } from './register/dialogs/verify-email-dialog/verify-email-dialog.component';
// Notifications
import { NotificationsComponent } from './notifications/notifications.component';
@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 { }
費用路由模塊
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.component';
import { ExpenseListComponent } from './expense-list/expense-list.component';
import { ViewExpenseComponent } from './view-expense/view-expense.component';
const routes: Routes = [
{
path: 'expenses/new',
component: NewExpenseComponent,
// canActivate: [CanActivateRouteGuard]
},
{
path: 'expenses/all',
component: ExpenseListComponent,
// canActivate: [CanActivateRouteGuard]
},
{
path: 'expenses/:id',
component: ViewExpenseComponent,
// canActivate: [CanActivateRouteGuard]
},
]
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class ExpensesRoutingModule {
}
費用模塊
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
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.component';
// Expense List
import { ExpenseListComponent } from './expense-list/expense-list.component';
// View Expense
import { ViewExpenseComponent } from './view-expense/view-expense.component';
// Dialogs
import { DeleteExpenseDialogComponent } from './view-expense/dialogs/delete-expense-dialog/delete-expense-dialog.component';
@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路由導入
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// ROUTING
import { AppRoutingModule } from './app-routing.module';
import { RouterLinkActive, CanActivate } from '@angular/router';
import { CanActivateRouteGuard } from './can-activate-route.guard';
...
您將您的AppRoutingModule包含在SharedModule中。
然后從功能模塊(例如ExpensesModule)加載此共享模塊
因此,您實際上要加載兩次。
要解決此問題,您必須將其從共享模塊中刪除。 如果您要保留任何共享路由,只需將其分開不同的文件,將核心路由保留在共享模塊之外,並將其與forRoot一起僅包含在您的主模塊中。
固定
設法通過從SharedModule中刪除AppRoutingModule並將其移到AppModule中來解決此問題。 現在,所有路線都可以正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.