Angular RouterModule.forRoot调用了两次

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

错误：RouterModule.forRoot（）调用了两次。延迟加载的模块应该 改为使用RouterModule.forChild（）

因此，我有我的主app routing.module.ts和app module.ts，如下所示：

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

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

---

有人能帮我吗。

在单独的延迟加载模块、概览模块、搜索模块、策略模块、CLAIMMODEL和设置模块中，您是否在其中声明了路由？如果是这样，在每个的@NgModule中是否有RouterModule.forRoot（）呢？它们应该是RouterModule.forChild（…）。听起来这可能就是问题所在。

我之所以会出现这个错误，是因为我不小心将根

AppModule

导入了延迟加载的模块。这导致加载延迟加载的模块时再次调用root

AppRoutingModule

，从而调用了两次

RouterModule.forRoot

---

如果确定没有调用

RouterModule.forRoot

两次，则这可能是问题的原因。检查是否未在延迟加载的模块中导入任何直接调用

RouterModule.forRoot的模块

，或导入调用

RouterModule.forRoot的模块
在子模块中使用
RouterModule.forChild（路由）
。类似于此文件
。/../application/overview/overview.module

如果您有更多子模块，则使用
RouterModule.forChild（您的数组）
而不是
RouterModule.forRoot（您的数组）
将
RouterModule
导入您的
共享模块。您可以在那里导入路由模块。该模块使用
forRoot
导入
RouterModule
，在惰性加载时第二次调用它。这会导致错误

相反，如果需要重定向，您应该直接导入
RouterModule

共享的.module.ts

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

我已经为此挣扎了一段时间。终于发现了问题

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

事实证明，我是从正在延迟加载的某个功能模块中的app.routing.ts文件导入AppRoutingModule。我之前这么做是因为它一直说它不识别routerLink，我在功能模块的一个组件中使用了它

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

PS-当我说功能模块时，我指的是我正在延迟加载的子模块。
在使用延迟加载时，我也面临同样的问题。最后我找到了一些解决办法

我已经从sharedModule中删除了“routingModule”和“routerModule”，并且仅在相应的routing.module.ts文件中使用routerModule
 在我的例子中，问题是我在功能模块中声明我的routes数组时忘记添加类型，如果您已经确保forRoot没有被调用两次，AppRoutingModule也没有被导入多次，那么您可以检查是否有我犯过的基本错误

它的定义是：

const feature_routes = [.....];

而不是：

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

我之所以面临这个问题，是因为我在延迟加载的子模块中使用了
RouterModule.forRoot（myRoutes）
。应该是

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

而不是使用

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

使用

我也面临过这个问题，对于未来的参与者来说，这是我的解决方案

不要在oer模块中导入批准模块，导入路由模块

这将得到解决。这里有一个例子

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

在imports数组中

  @NgModule({

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

将路由模块从

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

到

这将解决错误
当我错误地命名延迟加载模块的路由模块时，我遇到了这个错误
批准模块

我重新命名以匹配模块名称，例如StockRoutingModule，它已被修复。
是的，每个模块（即概览模块）都有自己的overview-routing.module.ts文件，其中包含RouterModule.forChild（）这意味着，当您在功能模块内创建功能模块时，可能需要额外的共享模块。例如，您有一个RegisterModule，其中包含与注册相关的所有内容，还有一个SmsRegisterModule，其中包含一些很少使用的内容，因此您希望它能够延迟加载。但是SmsRegisterModule可能正在使用RegisterModule中的一些组件。如果您只是将父模块导入其子模块中，您将遇到“调用两次”问题。因此，您创建了一个SharedRegisterModule，在其中放置RegisterModule和SmsRegisterModule中使用的组件。并在两者中导入SharedRegisterModule。谢谢。固定的。我之所以出现此错误，是因为我不小心将根AppModule导入了延迟加载的模块。在我的情况下也是如此：AppModule被导入了延迟加载的模块。我有种感觉，它是用Intellij IDEA自动编码的。回答得好，谢谢！在我的例子中，“不知何故”是我的IDE（WebStorm）试图“智能地”修复管道导入。专业提示：使用自定义管道模块@edwardbrosens，在我的例子中，WebStorm为我导入了它，当时我在子组件中使用了顶级管道，所以它不是我的，但自动导入魔法出了问题。我发现这非常令人困惑。我得到了确切的sa
 imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
     ],

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

  @NgModule({

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

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

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