RouterModule.forRoot调用了两次错误

Question

我正在尝试将Lazy Loading实现到我的应用程序中,但似乎遇到了一个问题,我得到了错误消息:

// 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.module.ts以及app-module.ts,如下所示:

APP-module.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 { }

APP-routing.ts

// 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 { }

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

shared.module.ts

// 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 { }

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

任何人都可以帮我这个.

Answer 1

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

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

Answer 2

我也遇到了这个问题，对于未来的人来说，这是我的解决方案。

不要在oer模块中导入AppRoutingModule，导入RoutingModule

它会得到解决。这是一个例子。

import { RouterModule } from '@angular/router';

并在导入数组中

  @NgModule({

 declaration: [], // your contents
 imports: [
  RouterModule,
  // Other modules
 ]
  })

Answer 3

我知道这是一篇旧帖子，但我最近遇到了这个问题，因为我在不知不觉中导入AppModule了子模块。

我的 IDE 弹出了我无意中点击的窗口，这添加到AppModule了我的导入中。如果您遇到此问题，请搜索一些内容！

Answer 4

我已经为此苦苦挣扎了一段时间。终于找到了问题。

我正在使用延迟加载。即使我只在应用程序中的一个地方使用了.forRoot，该错误也表明我使用了两次。

原来，我是从延迟加载的功能模块之一中的app.routing.ts文件中导入AppRoutingModule的。我之所以这样做是因为它一直说它无法识别我在该功能模块的一个组件中使用过的routerLink。

解决方案是将功能模块中的AppRoutingModule导入替换为从“ @ angular / router”导入的RouterModule。现在一切正常。

PS-当我说功能模块时，是指我正在延迟加载的子模块。

Answer 5

在单独的延迟加载模块中，OverviewModule、SearchModule、PolicyModule、ClaimModule 和 SettingsModule 中是否声明了路由？如果是这样，在每个的 @NgModule 中，您是否在某处有 RouterModule.forRoot() ？它们应该是 RouterModule.forChild(...)。听起来这可能是问题所在。

Answer 6

转换路由模块

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })

到

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

这将解决错误

Answer 7

而不是使用

  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
     ],

用

 imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
     ],