Web Architecture (Angular 17 + SSR)

• Stack: Angular 17, Angular Universal (@angular/ssr), Express for SSR, strict TypeScript, RxJS 7.
• Runtime mode: SSR with client hydration (provideClientHydration). Data cached across server/client via TransferState.
• Build/boot: Angular CLI for browser and server bundles; custom Express server (server.ts) using CommonEngine.

Top-level structure

• src/app:
  • Core: app.module.ts, app-routing.module.ts, app.module.server.ts.
  • Pages (feature modules): src/app/pages/** (lazy loaded per route).
  • Shared components: src/app/components/** (reusable modules: header, footer, modals, banners, etc.).
  • Services/Providers: src/providers/** (API, auth token, metrics, storage, config, etc.).
  • Guards/Resolvers: src/guards/**, src/resolvers/** (auth, domain/country, session, prefetch data).
  • Directives: src/directives/** (UX: debounce/throttle, lazy-image, swipe, etc.).
  • i18n: assets/i18n/*.json + custom loaders (browser/server).
• server.ts: Express server, special routes and Universal rendering.
• sitemap/**: sitemap generation served via Express.
• src/environments/**: environment configuration.

Routing and modules

• RouterModule.forRoot with initialNavigation: 'enabledBlocking' and lazy loading by country/feature.
• Key guards: DomainCountryGuard, AuthGuard, IsUserLoggedInGuard, CodeGuard, MovistarPlanGuard, etc.
• Prefetch resolvers: SessionResolveGuard, UserResolver, WebBannerResolver, PlansResolver.

SSR, hydration and TransferState

• Server interceptor: ServerStateInterceptor stores GET responses in TransferState.
• Browser interceptor: BrowserStateInterceptor reads from TransferState to skip duplicate requests.
• AppServerModule adds ServerModule, NoopAnimationsModule and server i18n loader.

Interceptors, initializers and DI

• Global client interceptors: TokenInterceptor, ErrorInterceptor.
• APP_INITIALIZER: loads SVGs, country, translations and auth token before bootstrap.