錯誤：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. 刪除它們和相應的導入語句。