javascript - 角度延迟加载模块错误 - 'RouterModule.forRoot() 调用了两次'
问题描述
我正在我的 Angular 6 应用程序中实现延迟加载的功能模块,并已成功为“发票”功能配置了一个,但我在为延迟加载的“费用”和“联系人”功能模块实现路由时遇到问题,它们的设置方式与第一个相同。
每个模块都已导入到 AppModule 中,并且它们还使用了一个 SharedModule,我已将其导入到 AppModule 和每个功能模块中。
使用“费用”或“联系人”模块路由到任何页面时,我在控制台中收到以下错误:
ERROR 错误:未捕获(承诺中):错误:RouterModule.forRoot() 调用了两次。延迟加载的模块应该使用 RouterModule.forChild() 代替。错误:RouterModule.forRoot() 调用了两次。延迟加载的模块应该使用 RouterModule.forChild() 代替。在提供ForRootGuard (vendor.js:106249)
我将.forChild (routes) 用于功能模块,但我能想到的唯一可能导致此问题的是过程中某处的纠结导入。根据之前关于其他人遇到此问题的问题,我检查了 AppModule 是否已导入任何其他模块,因此导致 forRoot() 被调用两次,但事实并非如此。
由于错误说与它在provideForRootGuard有关,我认为这可能与将CanActivateRootGuard导入每个模块有关,但删除它也不能解决问题。
应用路由模块:
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';
...
解决方案
使固定
设法通过从 SharedModule 中删除 AppRoutingModule 并改为 AppModule 来解决此问题。现在所有路线都运行良好。
推荐阅读
- python - 如何在 Pytorch 模型中更新权重和偏差时防止内存使用增长
- c++ - 带接口的 C++ SFINAE
- drupal-8 - 新的 \ZipArchive 扩展在 Drupal 模块中不起作用
- javascript - 从 vuejs 表单数据创建 JSON 对象
- javascript - 使用 Turf.js 计算面积时的单位问题
- python - 对 LSTM 模型的输入数据的不理解
- pandas - pandas fillna 有列数和行数限制吗?
- mlogit - 你可以在pylogit中没有选择地进行观察吗?
- r - data.table 连接中的列名标签
- recursion - prolog递归中的if语句