错误：RouterModule.forRoot() 调用了两次

Question

我有一个组件ListComponent需要在 2 个模块中使用，其中一个是延迟加载的。 所以我创建了声明 ListComponent 的 SharedModule。 ListComponent 使用了routerLink指令，所以它需要 RouterModule。 所以我导入了RouterModule，导致了这个错误。

core.js:1598 错误错误：未捕获（承诺）：错误：RouterModule.forRoot() 调用了两次。 延迟加载的模块应该使用 RouterModule.forChild() 代替。

全局搜索显示我只调用RouterModule.forRoot一次。 我的延迟加载模块调用RouterModule.forChild并且是唯一的其他路由模块。

我使用完全相同的设置创建了一个 stackblitz，但无法重现该问题。 它确实有效。 尽管如此，我还是不明白我的项目有什么不同。 https://stackblitz.com/edit/angular-shared-component-b

Answer 1

如果您只需要在SharedModule中导入RouterModule以使用诸如routerLink之类的指令，您可以像这样简单地导入它：

// ...
@NgModule({
  imports: [RouterModule], //  <-- without the .forRoot call
})
export class SharedModule { }
// ...

确保应用程序将基本模块（通常AppModule ，也许AppRoutingModule你的情况），您导入RouterModule.forRoot(yourRoutes)所以在使用的链接ListComponent正常工作。

在RouterModule API 文档中查看更多信息

Answer 2

在我的情况，问题AppModule通过IDE中的一个自动导入page.modules.ts

您可以快速检查这是否有问题：

1. 搜索AppModule
2. 从除AppModule和main.ts之外的所有文件中查找所有导入
3. 删除它们和相应的导入语句。