Ошибка Angular Lazy Loaded Modules - `` RouterModule.forRoot () вызывается дважды ''

Я внедряю функциональные модули с отложенной загрузкой в ​​свое приложение 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
  ]

})

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

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';

...

person nick.cook    schedule 25.06.2018    source источник


Ответы (2)


ИСПРАВИТЬ

Удалось исправить это, удалив AppRoutingModule из SharedModule и вместо этого в AppModule. Все маршруты теперь работают нормально.

person nick.cook    schedule 25.06.2018

Вы включаете свой AppRoutingModule в SharedModule.
и вы загружаете этот общий модуль из своих функциональных модулей (например, ExpensesModule).
Таким образом, вы фактически загружаете его дважды.
Чтобы исправить это, вы должны вынуть это из общего модуля. Если у вас есть общие маршруты, которые вы хотите сохранить, просто разделите их на разные файлы, оставьте основные маршруты вне общего модуля и включите их с помощью forRoot только в свой основной модуль.

person dAxx_    schedule 25.06.2018
comment
На самом деле у меня это как-то работает, удалив общий модуль из каждого из функциональных модулей, но ваше предложение кажется, что это будет правильный способ решить проблему. Однако, когда я удаляю AppRoutingModule из SharedModule, я получаю сообщение об ошибке в терминале, что «выход маршрутизатора не является известным элементом» ... - person nick.cook; 25.06.2018
comment
Обновление: добавление AppRoutingModule в AppModule вместо SharedModule полностью исправило его. Спасибо - person nick.cook; 25.06.2018
comment
Нет проблем, отметьте как отвеченный, помогло ли вам мое решение. Желаю вам удачи - person dAxx_; 25.06.2018