Error: RouterModule.forRoot() called twice

Question

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

core.js:1598 ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

全局搜索显示我只调用了一次 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) 导入它，所以 link 使用在 ListComponent 中正常工作。

更多内容见RouterModule API Docs

Answer 2

在我的例子中，问题是由 IDE 在 page.modules.ts

之一中自动导入的 AppModule

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

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