Kuber uses the Angular Router to handle navigation between different parts of the application. The routing is designed with a modular approach, utilizing Lazy Loading to ensure optimal performance by loading feature modules only when needed.

settingsMain Routing Configuration

---

The root routing configuration is defined in app.routes.ts. This file sets up the primary layouts and lazy-loaded feature modules.

import { Route } from '@angular/router';
import { MainLayoutComponent } from './layout/app-layout/main-layout/main-layout.component';
import { AuthGuard } from '@core/guard/auth.guard';
import { AuthLayoutComponent } from './layout/app-layout/auth-layout/auth-layout.component';

export const APP_ROUTE: Route[] = [
  {
    path: '',
    component: MainLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: '/authentication/signin', pathMatch: 'full' },
      {
        path: 'admin',
        canActivate: [AuthGuard],
        data: { role: Role.Admin },
        loadChildren: () => import('./admin/admin.routes').then((m) => m.ADMIN_ROUTE),
      },
      // ... other lazy loaded modules
    ],
  },
  {
    path: 'authentication',
    component: AuthLayoutComponent,
    loadChildren: () => import('./authentication/auth.routes').then((m) => m.AUTH_ROUTE),
  },
  { path: '**', component: Page404Component },
];

account_treeChild Routing (Feature Modules)

---

Each feature module has its own routing configuration to handle its internal navigation. For example, the admin.routes.ts file manages all administrator-specific pages.

import { Route } from '@angular/router';
import { Page404Component } from 'app/authentication/page404/page404.component';

export const ADMIN_ROUTE: Route[] = [
  {
    path: 'dashboard',
    loadChildren: () =>
      import('./dashboard/dashboard.routes').then((m) => m.ADMIN_DASHBOARD_ROUTE),
  },
  {
    path: 'employees',
    loadChildren: () =>
      import('./employees/employees.routes').then((m) => m.ADMIN_EMPLOYEE_ROUTE),
  },
  {
    path: 'projects',
    loadChildren: () =>
      import('./projects/projects.routes').then((m) => m.PROJECT_ROUTE),
  },
  {
    path: 'clients',
    loadChildren: () =>
      import('./clients/clients.routes').then((m) => m.ADMIN_CLIENT_ROUTE),
  },
  {
    path: 'leaves',
    loadChildren: () =>
      import('./leaves/leaves.routes').then((m) => m.LEAVE_ROUTE),
  },
  {
    path: 'payroll',
    loadChildren: () =>
      import('./payroll/payroll.routes').then((m) => m.PAYROLL_ROUTE),
  },
  // ... other child routes
  { path: '**', component: Page404Component },
];

boltLazy Loading

---

Lazy loading is achieved using the loadChildren property in the route definition. This allows Angular to split the application into multiple bundles that are loaded on demand.

securityRole-Based Access (Route Guards)

---

Routes are protected using the AuthGuard. Additionally, role-based access is enforced by passing the required role in the route's data property.

{
  path: 'admin',
  canActivate: [AuthGuard],
  data: {
    role: Role.Admin,
  },
  loadChildren: () => import('./admin/admin.routes').then((m) => m.ADMIN_ROUTE),
}

add_circleHow to Add a New Route

---

1. check_circleStep 1: Identify the feature module where you want to add the route (e.g., admin).
2. check_circleStep 2: Open the corresponding routes file (e.g., admin.routes.ts).
3. check_circleStep 3: Add a new entry to the route array:

   {
     path: 'my-new-page',
     component: MyNewPageComponent,
   }

4. check_circleStep 4: If it's a new feature area, add it to app.routes.ts using loadChildren.

tagHash Location Strategy

---

The project uses HashLocationStrategy for routing, which adds a # to the URL (e.g., localhost:4200/#/admin/dashboard). This is configured in app.config.ts:

{ provide: LocationStrategy, useClass: HashLocationStrategy }