feat: add SSR and prerendering support

- Install @angular/ssr and @angular/platform-server (v21.2.x)
- Create server entry point (server.ts) and server bootstrap (main.server.ts)
- Add server routes config (app.server.routes.ts) with 5 prerendered routes:
  /, /about, /schedule, /events, /contact
- Update angular.json with server/ssr/prerender build configuration
- Add prerender-routes.txt for build-time static route generation
- Fix SSR compatibility:
  - App component: guard DOM access with isPlatformBrowser
  - StructuredDataComponent: skip head manipulation on server
  - ThemeService: skip CSS variable application on server
  - ShowService/EventService: return empty arrays on API failure
    (graceful fallback during prerender with no backend)
- Prerendered output verified: 5 static HTML routes in dist/

src/app/app.server.routes.ts

@@ -0,0 +1,19 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+/**
+ * Server routes configuration for Angular SSR.
+ *
+ * The five public routes are prerendered at build time (SSG) for optimal SEO.
+ * Authenticated routes (/login, /admin) use SSR for dynamic rendering.
+ * All other routes fall back to SSR.
+ */
+export const serverRoutes: ServerRoute[] = [
+  { path: '', renderMode: RenderMode.Prerender },
+  { path: 'about', renderMode: RenderMode.Prerender },
+  { path: 'schedule', renderMode: RenderMode.Prerender },
+  { path: 'events', renderMode: RenderMode.Prerender },
+  { path: 'contact', renderMode: RenderMode.Prerender },
+  { path: 'login', renderMode: RenderMode.Server },
+  { path: 'admin', renderMode: RenderMode.Server },
+  { path: '**', renderMode: RenderMode.Server },
+];

src/app/app.ts

@@ -1,4 +1,5 @@
-import { Component, computed, effect, inject, OnInit, OnDestroy } from '@angular/core';
+import { Component, computed, effect, inject, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { NavbarComponent } from './navbar/navbar.component';
 import { MediaPlayerComponent } from './media-player/media-player.component';
@@ -17,6 +18,7 @@ import { SeoService } from './services/seo.service';
 export class App implements OnInit, OnDestroy {
   private stationConfig = inject(StationConfigService);
   private seoService = inject(SeoService);
+  private platformId = inject(PLATFORM_ID);
 
   readonly hasStream = computed(() => {
     const cfg = this.stationConfig.config();
@@ -27,6 +29,9 @@ export class App implements OnInit, OnDestroy {
   private resizeObserver: ResizeObserver | null = null;
 
   constructor() {
+    // These DOM operations only run in the browser.
+    if (!isPlatformBrowser(this.platformId)) return;
+
     // Update favicon when station config changes.
     effect(() => {
       const config = this.stationConfig.config();
@@ -46,6 +51,9 @@ export class App implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    // These DOM operations only run in the browser.
+    if (!isPlatformBrowser(this.platformId)) return;
+
     // Start watching router for automatic SEO metadata updates per route.
     this.seoService.watchRouter();
     // Handle the initial route (NavigationEnd already fired before ngOnInit).
@@ -64,7 +72,9 @@ export class App implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.resizeObserver?.disconnect();
+    if (isPlatformBrowser(this.platformId)) {
+      this.resizeObserver?.disconnect();
+    }
   }
 
   private updateNavbarHeight(): void {

src/app/services/event.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { Event } from '../interfaces/event';
 import { getAppConfig } from './app-config.service';
@@ -16,7 +17,12 @@ export class EventService {
   getEvents(active?: boolean): Observable<Event[]> {
     let params = new HttpParams();
     if (active !== undefined) params = params.set('active', String(active));
-    return this.http.get<Event[]>(this.baseUrl, { params });
+    return this.http.get<Event[]>(this.baseUrl, { params }).pipe(
+      catchError((err) => {
+        console.warn('EventService: Failed to load events, returning empty array.', err);
+        return of<Event[]>([]);
+      }),
+    );
   }
 
   getEvent(id: number): Observable<Event> {

src/app/services/show.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { Show } from '../interfaces/show';
 import { getAppConfig } from './app-config.service';
@@ -41,7 +42,12 @@ export class ShowService {
   private baseUrl = `${getAppConfig().apiBaseUrl}/api/shows`;
 
   getShows(): Observable<Show[]> {
-    return this.http.get<Show[]>(this.baseUrl);
+    return this.http.get<Show[]>(this.baseUrl).pipe(
+      catchError((err) => {
+        console.warn('ShowService: Failed to load shows, returning empty array.', err);
+        return of<Show[]>([]);
+      }),
+    );
   }
 
   getShow(id: number): Observable<Show> {

src/app/services/theme.service.ts

@@ -1,4 +1,5 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 
 import { StationConfig } from '../interfaces/station-config';
 
@@ -32,11 +33,16 @@ function gradient(from: string, mid: string, to: string): string {
   providedIn: 'root',
 })
 export class ThemeService {
+  private platformId = inject(PLATFORM_ID);
+
   /**
    * Apply color theme from StationConfig as CSS custom properties on `:root`.
    * Also generates derived gradient variables.
+   * Skips silently on the server (SSR) — CSS vars are set in the browser after hydration.
    */
   apply(config: StationConfig): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+
     const root = document.documentElement.style;
 
     for (const { field, prop } of COLOR_MAP) {

src/app/structured-data/structured-data.component.ts

@@ -1,4 +1,5 @@
-import { Component, effect, inject } from '@angular/core';
+import { Component, effect, inject, PLATFORM_ID, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { StructuredDataService } from '../services/structured-data.service';
 
 /**
@@ -16,10 +17,14 @@ import { StructuredDataService } from '../services/structured-data.service';
   standalone: true,
   template: '', // renders nothing in the body — writes to <head>
 })
-export class StructuredDataComponent {
+export class StructuredDataComponent implements OnDestroy {
   private service = inject(StructuredDataService);
+  private platformId = inject(PLATFORM_ID);
 
   constructor() {
+    // Only manipulate DOM in the browser; skip on the server.
+    if (!isPlatformBrowser(this.platformId)) return;
+
     effect(() => {
       const entries = this.service.structuredData();
       this.renderEntries(entries);
@@ -27,6 +32,7 @@ export class StructuredDataComponent {
   }
 
   ngOnDestroy(): void {
+    if (!isPlatformBrowser(this.platformId)) return;
     this.clearTags();
   }
 

src/main.server.ts

@@ -0,0 +1,24 @@
+import { APP_ID } 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 { serverRoutes } from './app/app.server.routes';
+
+const serverAppConfig = {
+  ...appConfig,
+  providers: [
+    ...appConfig.providers,
+    { provide: APP_ID, useValue: 'server' },
+    provideServerRendering(withRoutes(serverRoutes)),
+  ],
+};
+
+/**
+ * Bootstrap function for server-side rendering.
+ * Exports a function that accepts BootstrapContext and returns ApplicationRef,
+ * as required by @angular/ssr's CommonEngine bootstrap signature.
+ */
+export default (ctx: BootstrapContext) =>
+  bootstrapApplication(App, serverAppConfig, ctx);