diff --git a/src/app/app.ts b/src/app/app.ts index 03a215e..ec54688 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -54,14 +54,17 @@ export class App implements OnInit, OnDestroy { } ngOnInit(): void { + // Load station config on BOTH server and browser. On the server this + // fetches fresh data from the API so SSR renders with real colors, + // assets, and content — not DEFAULT_CONFIG baked at build time. + this.stationConfig.load().catch(() => {}); + // These DOM operations only run in the browser. if (!isPlatformBrowser(this.platformId)) return; - // Load runtime config.json and station config asynchronously in the - // background — do not block rendering. The app already renders with - // defaults from the SSR/prerendered HTML. + // Load runtime config.json asynchronously in the background — do not + // block rendering. loadAppConfigAsync(this.http).catch(() => {}); - this.stationConfig.load().catch(() => {}); // Start watching router for automatic SEO metadata updates per route. this.seoService.watchRouter(); diff --git a/src/main.server.ts b/src/main.server.ts index 3b69a4d..5dbd571 100644 --- a/src/main.server.ts +++ b/src/main.server.ts @@ -1,10 +1,11 @@ -import { APP_ID } from '@angular/core'; +import { APP_ID, APP_INITIALIZER, isPlatformServer, PlatformId } from '@angular/core'; import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser'; import { provideServerRendering, withRoutes } from '@angular/ssr'; import { appConfig } from './app/app.config'; import { App } from './app/app'; import { APP_CONFIG, AppConfig } from './app/services/app-config.service'; +import { StationConfigService } from './app/services/station-config.service'; import { serverRoutes } from './app/app.server.routes'; // During SSR, the API base URL must be absolute (HttpClient runs in Node.js). @@ -19,6 +20,21 @@ const serverAppConfig = { { provide: APP_ID, useValue: 'server' }, { provide: APP_CONFIG, useValue: ssrAppConfig }, provideServerRendering(withRoutes(serverRoutes)), + // Block server rendering until station config is fetched from the API. + // This ensures SSR renders with real DB data (colors, assets, content) + // instead of DEFAULT_CONFIG baked at build time. In the browser, this + // is a no-op — config loads async in ngOnInit after first paint. + { + provide: APP_INITIALIZER, + multi: true, + deps: [StationConfigService, PlatformId], + useFactory: (svc: StationConfigService, platformId: object) => { + if (isPlatformServer(platformId)) { + return () => svc.load().catch(() => {}); + } + return () => {}; + }, + }, ], };