Router Internals

import { UrlSerializer, UrlTree, DefaultUrlSerializer } from '@angular/router';

// Custom serializer: support semicolons in query params (e.g., legacy systems)
@Injectable()
export class LegacyUrlSerializer extends UrlSerializer {
  private default = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
    // Convert legacy format: /path?a=1;b=2 → /path?a=1&b=2
    const normalized = url.replace(/;(?=[^/]*=)/g, '&');
    return this.default.parse(normalized);
  }

  serialize(tree: UrlTree): string {
    return this.default.serialize(tree);
  }
}

// Custom serializer: custom encoding for special characters
@Injectable()
export class CustomEncodingSerializer implements UrlSerializer {
  private default = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
    // Decode custom encoding before standard parsing
    const decoded = this.customDecode(url);
    return this.default.parse(decoded);
  }

  serialize(tree: UrlTree): string {
    const standard = this.default.serialize(tree);
    return this.customEncode(standard);
  }

  private customDecode(url: string): string { /* ... */ return url; }
  private customEncode(url: string): string { /* ... */ return url; }
}

// Register:
{ provide: UrlSerializer, useClass: LegacyUrlSerializer }

@Injectable({ providedIn: 'root' })
class RouterEventLogger {
  constructor(router: Router) {
    router.events.subscribe(event => {
      // Phase 1: Recognition
      // 1.  NavigationStart          — navigation begins
      // 2.  RouteConfigLoadStart     — lazy chunk download starts (if lazy)
      // 3.  RouteConfigLoadEnd       — lazy chunk download complete
      // 4.  RoutesRecognized         — URL matched to route config

      // Phase 2: Guards
      // 5.  GuardsCheckStart
      // 6.  ChildActivationStart     — for each route in tree
      // 7.  ActivationStart
      // 8.  GuardsCheckEnd

      // Phase 3: Resolution
      // 9.  ResolveStart
      // 10. ResolveEnd

      // Phase 4: Activation
      // 11. ActivationEnd            — component created/reused
      // 12. ChildActivationEnd
      // 13. NavigationEnd            — navigation complete

      // Error/Cancel:
      // NavigationCancel (guard returned false/UrlTree)
      // NavigationError (unexpected error during navigation)

      console.log(event.constructor.name, (event as any).url);
    });
  }
}

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NetworkAwarePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<unknown>): Observable<unknown> {
    // Don't preload if explicitly opted out
    if (route.data?.['preload'] === false) {
      return of(null);
    }

    // Check Network Information API
    const connection = (navigator as any).connection;
    if (connection) {
      // Preload only on fast connections
      const slowConnections = ['slow-2g', '2g'];
      if (slowConnections.includes(connection.effectiveType)) {
        return of(null);  // don't preload on slow networks
      }
      // Don't preload if user is saving data
      if (connection.saveData) {
        return of(null);
      }
    }

    // Also respect user's preload flag from route data
    if (route.data?.['preload'] === true) {
      return load();  // preload this specific route
    }

    // Default: preload all on fast connections
    return load();
  }
}

// Register:
provideRouter(routes, withPreloading(NetworkAwarePreloadingStrategy))