Routing: URLs drive component trees

One URL, one component fragment

The Angular router maps URLs to a tree of components via router-outlet. Guards can block navigation (e.g. authentication); resolvers can prefetch data before the component renders. Lazy-loaded routes split the bundle so the first paint stays fast.

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'invoices',
    loadChildren: () =>
      import('./invoices/invoices.routes').then(m => m.INVOICE_ROUTES),
    canActivate: [authGuard],
  },
];