我正在我的angular 6应用程序中实现延迟加载的功能模块,并已成功为“发票”功能配置了一个模块,但是在实现延迟加载的“费用”和“联系人”的路由时遇到了问题功能模块,其设置方法与第一个相同。
每个模块都已导入到AppModule中,并且它们还使用了SharedModule,我已将其导入到AppModule和每个功能模块中。
当使用“费用”或“联系人”模块路由到任何页面时,我在控制台中收到以下错误:
错误错误:未捕获(承诺):错误:RouterModule.forRoot()被调用了两次。延迟加载的模块应改用RouterModule.forChild()。 错误:RouterModule.forRoot()被调用了两次。延迟加载的模块应改用RouterModule.forChild()。 在ProvideForRootGuard(vendor.js:106249)
我 am 对功能模块使用.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
]
})
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 {
}
费用模块
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';
...
答案 0 :(得分:1)
您正在将AppRoutingModule包含在SharedModule中。
然后从功能模块(例如ExpensesModule)加载此共享模块
因此,您实际上要加载两次。
要解决此问题,您必须将其从共享模块中删除。如果您要保留任何共享路由,只需将其分开不同的文件,将核心路由保留在共享模块之外,并将其与forRoot一起仅包含在您的主模块中。
答案 1 :(得分:0)
FIX
设法通过从SharedModule中删除AppRoutingModule并将其移到AppModule中来解决此问题。现在所有路线都可以正常运行。