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
+    // Load runtime config.json asynchronously in the background — do not
-    // background — do not block rendering. The app already renders with
+    // block rendering.
-    // defaults from the SSR/prerendered HTML.
     loadAppConfigAsync(this.http).catch(() => {});
-    this.stationConfig.load().catch(() => {});
 
     // Start watching router for automatic SEO metadata updates per route.
     this.seoService.watchRouter();

src/main.server.ts

@@ -1,10 +1,12 @@
-import { APP_ID } from '@angular/core';
+import { APP_ID, APP_INITIALIZER, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 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 +21,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, PLATFORM_ID],
+      useFactory: (svc: StationConfigService, platformId: object) => {
+        if (!isPlatformBrowser(platformId)) {
+          return () => svc.load().catch(() => {});
+        }
+        return () => {};
+      },
+    },
   ],
 };