RouterModule.forRoot 调用了两次 [英] RouterModule.forRoot called twice

问题描述

我正在尝试在我的应用程序中实现延迟加载，但似乎遇到了一个问题，我收到了错误消息:

I am trying to implement Lazy Loading into my application but seem to be coming across an issue whereby I get the error message :

错误:RouterModule.forRoot() 调用了两次.延迟加载的模块应该改用 RouterModule.forChild().

Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

所以我有我的主要 app-routing.module.ts 和 app-module.ts，如下所示:

So I have my main app-routing.module.ts and also app-module.ts which looks like below:

// External Dependencies
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Internal Dependencies
import { MaterialModule } from '../app/configuration/material/material.module';
import { SharedModule } from '../app/application/shared/shared.module';
import { RoutingModule } from '../app/configuration/routing/routing.module';
import { SettingsModule } from '../app/application/settings/settings.module';

import { AppComponent } from './app.component';

import { SearchService } from './application/shared/services/search.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    SharedModule,
    RoutingModule,
    MaterialModule,
    HttpClientModule,
    FormsModule,
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})

export class AppModule { }

app-routing.ts

// External Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';

const appRoutes: Routes = [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: 'overview', loadChildren: '../../application/overview/overview.module#OverviewModule' },
  { path: 'search', loadChildren: '../../application/search/search.module#SearchModule' },  
  { path: 'policy/:id', loadChildren: '../../application/policy/policy.module#PolicyModule' },
  { path: 'claim/:id', loadChildren: '../../application/claim/claim.module#ClaimModule' },
  { path: 'settings', loadChildren: '../../application/settings/settings.module#SettingsModule' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})

export class RoutingModule { }

这工作正常并且应用程序正确加载.这里的问题是，在 SharedModule 中，它提供了使用 routerLink 将用户重定向到新页面的组件.

This works fine and the application correctly loads. The issue from here is that in the SharedModule it has come components to redirect the user using routerLink to a new page.

// External Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CalendarModule } from 'primeng/calendar';
import { AgmCoreModule } from '@agm/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { PdfViewerModule } from 'ng2-pdf-viewer';

// Internal Dependencies
import { MaterialModule } from '../../configuration/material/material.module';
import { RoutingModule } from '../../configuration/routing/routing.module';

import { NavbarTopComponent } from '../../application/shared/components/navbar-top/navbar-top.component';
import { NavbarSideComponent } from './components/navbar-side/navbar-side.component';
import { TemplateCardWComponent } from './components/template-card-w/template-card-w.component';
import { FilterPipe } from './pipes/filter.pipe';
import { StandardTableComponent } from './components/standard-table/standard-table.component';
import { OrderPipe } from '../shared/pipes/order.pipe';
import { ActionComponent } from './components/action/action.component';
import { GoogleMapComponent } from './components/google-map/google-map.component';
import { HtmlEditorComponent } from './components/html-editor/html-editor.component';
import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
import { KeyBindingPipe } from './pipes/key-binding.pipe';
import { StandardEditTableComponent } from './components/standard-edit-table/standard-edit-table.component';

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    RoutingModule,
    FormsModule,
    CalendarModule,
    AgmCoreModule,
    FroalaEditorModule,
    FroalaViewModule,
    PdfViewerModule
  ],
  declarations: [
    NavbarTopComponent,
    NavbarSideComponent,
    TemplateCardWComponent,
    FilterPipe,
    StandardTableComponent,
    OrderPipe,
    ActionComponent,
    GoogleMapComponent,
    HtmlEditorComponent,
    PdfViewerComponent,
    KeyBindingPipe,
    StandardEditTableComponent
  ],
  exports: [
  ]
})

export class SharedModule { }

如您所见，我必须导入 RouterModule.如果我删除 RouterModule，应用程序将加载但不会重定向.如果我保留 RouterModule，应用程序将导致问题顶部的错误.

As you can see I am having to import the RouterModule. If I remove the RouterModule, the application will load but no re-direct. If I keep the RouterModule the application will cause the error at the top of the question.

谁能帮我解决这个问题.

Could anyone help me on this.

推荐答案

我收到这个错误是因为我不小心将根 AppModule 导入到我的延迟加载模块中.这导致在加载延迟加载模块时再次调用根 AppRoutingModule，因此 RouterModule.forRoot 被调用两次.

I got this error because I somehow accidentally imported the root AppModule into my lazy-loaded module. This caused the root AppRoutingModule to be called again when the lazy-loaded module was loaded, and thus RouterModule.forRoot was called twice.

如果您确定您没有调用 RouterModule.forRoot 两次，那么这可能是问题的原因.检查您没有在延迟加载的模块中导入任何直接调用 RouterModule.forRoot 的模块或导入调用 RouterModule.forRoot 的模块.

If you are certain you aren't calling RouterModule.forRoot twice then this could be the cause of the issue. Check that you aren't importing any modules in your lazy-loaded module that direcly call RouterModule.forRoot or import a module that calls RouterModule.forRoot.

这篇关于RouterModule.forRoot 调用了两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！