Angular，router.navigate 在頁面重新加載后第一次延遲

Question

我嘗試做一個簡單的router.navigate() ：

navigateToEmployeeView() {
    console.log('DEBUG: NAVIGATE');
    this.loading = true;
    this.router.navigate(['employee']);
  }

它按預期工作，唯一的問題是每次重新加載新頁面后最多需要 0.5-1 秒，直到路由器將 URL 更改為新請求的頁面。 navigateToEmployeeView()會立即執行，但它確實需要一點時間才能導航到.../employee 。 它會在當前的 URL 上停留一段時間，直到它最終導航到新請求的那個。 但這只會在每次重新加載后第一次發生。 之后立即導航到新的 URL。

有誰知道頁面重新加載后可能會延遲到新 URL 的第一次導航嗎？

編輯：

路線在這里定義

const homeRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'employee',
    loadChildren: 'app/employee/employee.module#EmployeeModule',
    canActivate: [AuthGuard]
  },
  // more stuff 
];

@NgModule({
  imports: [RouterModule.forChild(homeRoutes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {
}

Answer 1

這可能不是問題，只是連接速度有些慢。

考慮到模塊是延遲加載的，您只會在頁面重新加載時遇到速度變慢； 這可能是由於瀏覽器在您的連接上第一次獲取延遲加載的模塊需要多長時間。 （通過查看瀏覽器開發控制台上的網絡選項卡來檢查這一點）。

Answer 2

對於將來遇到這個問題的任何人，我能夠通過在我的路由模塊中添加 preloadingStrategy 來解決這個問題

RouterModule.forRoot(
  appRoutes,
  {
    preloadingStrategy: PreloadAllModules
  }
)

參考更多細節檢查角度的延遲加載文檔