Course Progress 100%

Angular Router Advanced

← Angular Route Guards Router Advanced →

Angular Router Advanced concepts routing system को production-grade बनाते हैं। जब application large हो जाती है, multiple layouts, complex navigation flows, data preloading, performance tuning और reuse strategies की जरूरत पड़ती है, तब advanced router features use किए जाते हैं।

इस chapter में हम Angular Router के advanced capabilities को deep और practical तरीके से समझेंगे, ताकि complex real-world routing scenarios confidently handle किए जा सकें।

Router Events (Deep Understanding)

Angular Router navigation के दौरान कई events emit करता है।

Common router events:

  • NavigationStart
  • RoutesRecognized
  • GuardsCheckStart
  • GuardsCheckEnd
  • ResolveStart
  • ResolveEnd
  • NavigationEnd
  • NavigationCancel
  • NavigationError

इन events को listen करके navigation lifecycle observe किया जा सकता है।

this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
    console.log('Navigation started');
  }
});

यह analytics, loaders और debugging के लिए useful है।

Global Loading Indicator with Router Events

this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
    this.loading = true;
  }

  if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
    this.loading = false;
  }
});

यह pattern global spinner implement करने में widely use होता है।

Route Resolvers (Advanced Usage)

Resolver route activate होने से पहले data fetch करता है।

Advanced benefits:

  • UI blank state avoid होती है
  • Error handling centralized होती है
  • Navigation predictable बनती है

Resolver failure पर navigation cancel भी की जा सकती है।

Error Handling in Resolvers

resolve(): Observable<Data> {
  return this.service.getData().pipe(
    catchError(() => EMPTY)
  );
}

Resolver failure handling navigation stability improve करती है।

Route Reuse Strategy

Angular by default routes reuse करता है।

Advanced cases में custom reuse strategy implement की जा सकती है।

Use cases:

  • Tab-based navigation
  • Scroll position preserve करना
  • Heavy component reuse

Custom RouteReuseStrategy Concept

export class CustomReuseStrategy implements RouteReuseStrategy {
  shouldDetach() { return false; }
  store() {}
  shouldAttach() { return false; }
  retrieve() { return null; }
  shouldReuseRoute() { return true; }
}

यह advanced optimization scenarios के लिए use होता है।

Multiple Router Outlets (Named Outlets)

Angular multiple outlets support करता है।

<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

Routes:

{
  path: 'dashboard',
  component: DashboardComponent,
  children: [
    {
      path: 'stats',
      component: StatsComponent,
      outlet: 'sidebar'
    }
  ]
}

यह multi-layout apps के लिए useful है।

Auxiliary Routes

Named outlets auxiliary routes कहलाते हैं।

URL example:

  • /dashboard(sidebar:stats)

Complex UI layouts के लिए powerful feature है।

Relative Navigation

Relative navigation current route के context में navigate करती है।

this.router.navigate(['edit'], { relativeTo: this.route });

यह deeply nested routes में cleaner approach है।

Router State Snapshot (Deep Dive)

Router state tree structure provide करता है।

this.router.routerState.snapshot

यह advanced debugging और analytics के लिए use होता है।

Scroll Position Restoration Advanced

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
})

Advanced UX:

  • Back navigation पर scroll restore
  • Anchor-based scrolling

Content-heavy apps में essential है।

Navigation Extras (Advanced)

this.router.navigate(['/product', 10], {
  skipLocationChange: true,
  replaceUrl: true,
  state: { from: 'home' }
});

Options:

  • skipLocationChange
  • replaceUrl
  • state

यह advanced navigation control देता है।

Accessing Navigation State

history.state.from;

State-based navigation forms और wizards में useful है।

Route Title Strategy

Angular advanced title management support करता है।

@Injectable()
export class CustomTitleStrategy extends TitleStrategy {
  updateTitle(snapshot: RouterStateSnapshot) {
    const title = this.buildTitle(snapshot);
    if (title) {
      document.title = `MyApp - ${title}`;
    }
  }
}

Centralized title control possible होता है।

Router Performance Optimization

Advanced routing performance techniques:

  • Lazy loading modules
  • Preloading strategies
  • Route-level guards optimization
  • Avoid heavy resolvers

Router configuration performance impact directly UX पर पड़ता है।

Debugging Complex Routing Issues

Tools:

  • enableTracing option
  • Router events logging
  • Angular DevTools
  • Network chunk analysis

Complex routing bugs mostly configuration mistakes से आते हैं।

Router and SSR Advanced Considerations

SSR routing में:

  • Absolute URLs
  • Guards behavior
  • Resolvers timing

SSR compatibility check करना जरूरी है।

Router Security Advanced

Advanced security patterns:

  • Role-based guards
  • canLoad + canActivate combination
  • Server-side verification

Router security client-side defense layer provide करता है।

Common Advanced Routing Pitfalls

  • Overusing resolvers
  • Heavy logic in guards
  • Complex outlet structures
  • Ignoring route order

Advanced features wisely use करने चाहिए।

Real-World Advanced Routing Scenarios

Angular Router Advanced widely use होता है:

  • Multi-layout dashboards
  • Wizard-based workflows
  • Enterprise admin systems
  • Large-scale modular applications

Angular Router Advanced concepts routing को simple navigation से powerful application flow engine बना देते हैं।

← Angular Route Guards Router Advanced →
  • Home