atomic-design-poc/src/app/app.config.ts

import {
  ApplicationConfig,
  LOCALE_ID,
  isDevMode,
  provideBrowserGlobalErrorListeners,
} from '@angular/core';
import { provideRouter, withInMemoryScrolling, withViewTransitions } from '@angular/router';
import type { ActivatedRouteSnapshot } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { registerLocaleData } from '@angular/common';
import localeNl from '@angular/common/locales/nl';
import localeEn from '@angular/common/locales/en';

import { routes } from './app.routes';
import { scenarioInterceptor } from '@shared/infrastructure/scenario.interceptor';
import { roleInterceptor } from '@shared/infrastructure/role.interceptor';
import { provideApiClient } from '@shared/infrastructure/api-client.provider';
import { SESSION_PORT } from '@shared/application/session.port';
import { SessionStore } from '@auth/application/session.store';
import { provideRouteFocus } from '@shared/layout/route-focus';
import { provideUnloadFlush } from '@shared/application/pending-saves';

// Both locales' data so DatePipe/number pipes work for whichever bundle is active.
registerLocaleData(localeNl);
registerLocaleData(localeEn);

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(
      routes,
      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' }),
      // Cross-fade page-to-page navigations only. A silent same-route nav — e.g.
      // draft-sync stamping `?aanvraag=<id>` into the URL mid-wizard — must NOT
      // animate: for the transition's duration Firefox's `::view-transition`
      // overlay swallows pointer events (Chrome sets pointer-events:none, so it
      // doesn't), which loses a click landing on it and makes the wizard's "next"
      // button need a second click. Skip the transition when the route is unchanged.
      withViewTransitions({
        onViewTransitionCreated: ({ transition, from, to }) => {
          // `from`/`to` are the ROOT snapshots (the shared shell), so descend to the
          // leaf before comparing — otherwise every navigation looks "same route".
          const leaf = (r: ActivatedRouteSnapshot) => {
            while (r.firstChild) r = r.firstChild;
            return r;
          };
          if (leaf(from).routeConfig === leaf(to).routeConfig) transition.skipTransition();
        },
      }),
    ),
    // Dev-only: the ?scenario= toggle must never reach a production build, where
    // a query param could otherwise force errors on the live app.
    provideHttpClient(withInterceptors(isDevMode() ? [scenarioInterceptor, roleInterceptor] : [])),
    provideApiClient(),
    { provide: SESSION_PORT, useExisting: SessionStore },
    // Per-bundle locale: the localize build sets `$localize.locale` ('nl'/'en'); the
    // non-localized dev/source build leaves it undefined → fall back to 'nl'. (Was hardcoded
    // 'nl', which mis-formatted dates/numbers in the en bundle.)
    { provide: LOCALE_ID, useFactory: () => $localize.locale ?? 'nl' },
    provideRouteFocus(),
    provideUnloadFlush(),
  ],
};