Как работают route guards и lazy loading в Angular Router?

Route guard — функция, которая решает, можно ли перейти по маршруту, lazy loading загружает код маршрута только когда он понадобился.

Guards

В современных версиях это обычные функции:

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.createUrlTree(['/login']);
};

export const routes: Routes = [
  { path: 'admin', canActivate: [authGuard], loadComponent: () => import('./admin').then((m) => m.AdminComponent) },
];

Основные типы: canActivate (можно ли войти), canDeactivate (можно ли уйти, например при несохранённой форме), canMatch (подходит ли маршрут), resolve (подгрузить данные до показа).

Lazy loading

loadComponent и loadChildren загружают код через динамический import(), поэтому он попадает в отдельный чанк и не раздувает начальный бандл.

Важно

Guards защищают интерфейс, но не данные: сервер обязан проверять права самостоятельно.

Коротко для собеседования

Guard — функция-фильтр перехода, возвращающая true, false или UrlTree. Lazy loading разделяет бандл по маршрутам.