Guards mengontrol akses ke route, Resolvers menyiapkan data sebelum navigasi.

Functional Guard

export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService)
  const router = inject(Router)

  if (auth.isLoggedIn()) return true
  return router.parseUrl("/login")
}

Menggunakan Guard

export const routes: Routes = [
  {
    path: "dashboard",
    component: DashboardComponent,
    canActivate: [authGuard],
  },
]

Resolver

export const userResolver: ResolveFn<User> = (route) => {
  const api = inject(ApiService)
  return api.getUser(route.paramMap.get("id")!)
}