【问题标题】：RouterModule.forRoot called twiceRouterModule.forRoot 调用了两次
【发布时间】：2018-09-15 03:36:31
【问题描述】：

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

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

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

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

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 将用户重定向到新页面的组件。

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

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

谁能帮我解决这个问题。

【问题讨论】：

标签： angular angular-routing

【解决方案1】：

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

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

【讨论】：

这意味着，当您在功能模块中创建功能模块时，您可能需要一个额外的共享模块。例如，您有一个 RegisterModule 包含与注册相关的所有内容，以及一个 SmsRegisterModule，其中包含一些很少使用的内容，因此您希望它延迟加载。但是 SmsRegisterModule 可能正在使用 RegisterModule 中的某些组件。如果您只是在其子模块中导入父模块，您将遇到“调用两次”问题。因此，您创建了一个 SharedRegisterModule，在其中放置了 RegisterModule 和 SmsRegisterModule 中使用的组件。并在两者中导入 SharedRegisterModule。
谢谢。固定的。我收到此错误是因为我不小心将根 AppModule 导入到我的延迟加载模块中。
在我的情况下也是如此：AppModule 被导入到我的延迟加载模块中。我有一种感觉，它是用 Intellij IDEA 自动编码的。好的答案，谢谢！
在我的情况下，“不知何故”是我的 IDE (WebStorm) 试图“智能地”修复管道导入。专业提示：使用自定义管道模块！
@edwardbrosens，就我而言，当我在子组件中使用顶级管道时，WebStorm 为我导入了它，所以不是我，而是自动导入魔法出错了。

【解决方案2】：

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

我正在使用延迟加载。尽管我只在应用程序的一个地方使用了 .forRoot，但错误提示我使用了两次。

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

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

PS - 当我说功能模块时，我的意思是我延迟加载的子模块。

【讨论】：

我觉得这很令人困惑。由于我在 SharedModule 中导入 AppRoutingModule，并且在延迟加载的模块中也使用了 SharedModule，因此我遇到了完全相同的问题 RouterModule.forRoot() 调用了两次。 SharedModule 有一个使用 routerLink 的面包屑组件。仅导入 RouterModule 会使所有工作重新开始。但这违背了 Angular 文档：“RouterModule 可以多次导入：每个延迟加载的包一次。”angular.io/api/router/RouterModule#usage-notes

【解决方案3】：

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

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

会解决的。这是一个例子。

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

在导入数组中

  @NgModule({

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

【讨论】：

我在多个模块中处理相同的组件作为选择和路由，这解决了我的问题。谢谢。
这是我的问题的修复。谢谢

【解决方案4】：

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

【讨论】：

是的，每个模块 I.E. OverviewModule 有自己的 overview-routing.module.ts 文件，里面包含一个 RouterModule.forChild()

【解决方案5】：

而不是使用

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

使用

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

【讨论】：

【解决方案6】：

当我错误地命名了我的延迟加载模块的路由模块时，我得到了这个错误 AppRoutingModule。

我重命名以匹配模块名称，例如 StockRoutingModule，它已修复。

【讨论】：

【解决方案7】：

从

转换路由模块

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

到

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

这将解决错误

【讨论】：

完美解决方案

【解决方案8】：

在子模块中使用RouterModule.forChild(routes)。喜欢这个文件../../application/overview/overview.module。

如果您有更多子模块，请使用RouterModule.forChild(yourarray) 而不是RouterModule.forRoot(yourarray)

【讨论】：

【解决方案9】：

我遇到了这个问题，因为我在延迟加载的子模块中使用了RouterModule.forRoot(myRoutes)。应该是的

@NgModule({
  imports: [ RouterModule.forChild(myRoutes) ], // changed forRoot with forChild
  exports: [ RouterModule ]
})

【讨论】：

【解决方案10】：

您不会将RouterModule 导入您的SharedModule。你在那里导入RoutingModule。这个模块导入RouterModule 和forRoot，在延迟加载时第二次调用它。这会导致错误。

如果你需要重定向，你应该直接导入RouterModule。

shared.module.ts

@NgModule({
  imports: [
  CommonModule,
  MaterialModule,
  RouterModule, /* NOT RoutingModule */
  FormsModule,
  CalendarModule,
  AgmCoreModule,
  FroalaEditorModule,
  FroalaViewModule,
  PdfViewerModule
],

【讨论】：

【解决方案11】：

我在使用延迟加载时也遇到了同样的问题。终于找到了解决办法。

我已经从 sharedModule 中删除了“routingModule”和“routerModule”，并且仅在各自的 routing.module.ts 文件中使用了 routerModule。

【讨论】：

【解决方案12】：

在我的情况下，问题是我在功能模块中声明我的路由数组时忘记添加类型，如果您确保没有调用 forRoot 两次并且 AppRoutingModule 也没有多次导入，您可以检查基本像我犯的错误。

定义为：

const feature_routes = [.....];

代替：

const feature_routes : Routes = [.....];

【讨论】：