我正在我的angular 6应用程序中实现延迟加载的功能模块,并已成功配置一个“发票”功能,但我在为延迟加载的“费用”和“联系人”功能模块实施路由时遇到问题,它们的设置方式与第一种方式相同 .
每个模块都已导入AppModule,它们也使用SharedModule,我已将其导入AppModule和每个功能模块 .
使用“费用”或“联系人”模块路由到任何页面时,我在控制台中收到以下错误:
错误错误:未捕获(在承诺中):错误:RouterModule.forRoot()调用两次 . 延迟加载的模块应该使用RouterModule.forChild() . 错误:RouterModule.forRoot()调用两次 . 延迟加载的模块应该使用RouterModule.forChild() . at provideForRootGuard(vendor.js:106249)
我_0984991_使用.forChild(路由)作为功能模块,但我唯一能想到的可能是导致这种情况在这个过程中的某个地方纠缠不清 . 基于之前有关其他人遇到此问题的问题,我检查了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
]
})
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.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 { }
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.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 {
}
ExpensesModule
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 Routing Imports
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';
...
2 回答
您在SharedModule中包含了AppRoutingModule .
并从功能模块(如ExpensesModule)加载此共享模块
所以你实际上加载了两次 .
要解决这个问题,您必须从共享模块中取出它 . 如果您想要保留任何共享路由,只需将它们分开不同的文件,将核心路由保留在共享模块之外,并将forRoot仅包含在主模块中 .
FIX
通过从SharedModule和AppModule中删除AppRoutingModule来管理解决此问题 . 所有路线现在都运转良好 .