Angular 8 延遲加載模塊 - 無法導航

Question

我最難過。 我已經設置了我認為正確的結構，但該應用程序不允許我導航，更糟糕的是，它向我展示了相同的頁面。 我正在嘗試導航到 /login 但沒有任何效果。

應用路由

const routes: Routes = [
  ///// OPEN ROUTES /////
  { path: "login", component: LoginComponent },
  ///// AUTHENTICATED ROUTES /////
  { path: "home", component: HomeComponent },
  ///// FEATURE MODULES (LAZY LOADED) /////
  {
    path: "clients",
    loadChildren: () =>
      import("./clients/clients.module").then((m) => m.ClientsModule),
  },

  ///// CATCH ALL ROUTES /////
  { path: "not-authorized", component: NotAuthorizedComponent },
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent },
];

客戶端路由模塊

const routes: Routes = [
  {
    path: "",
    component: ClientsComponent,
    children: [
      {
        path: ":id",
        component: ClientDetailsComponent,
      },
      {
        path: ":id/edit",
        component: ClientEditComponent,
      },
      {
        path: "add",
        component: ClientAddComponent,
      },
      {
        path: "**",
        redirectTo: "",
      },
    ],
  },
];

導航頁面的 A 鏈接上只有一個 routerLink="/login"

#

編輯

忘記從主應用程序模塊中卸載 ClientsModule，所以它加載了兩次。

Answer 1

檢查事項：

1. app.component.html 中是否有路由器插座

2. 客戶端路由模塊不正確。 更具體的路線 go 到頂部，不太具體的路線 go 朝向底部：

   children: [ { path: "add", ... }, { path: ":id", ... }, { path: ":id/edit", ... } ]