feat: add SSR and prerendering support
CI Pipeline / backend-test (push) Successful in 10m24s
CI Pipeline / frontend-test (push) Failing after 19s
CI Pipeline / frontend-build (push) Failing after 23s
CI Pipeline / backend-lint (push) Successful in 12s
CI Pipeline / backend-test (pull_request) Successful in 10m45s
CI Pipeline / frontend-test (pull_request) Failing after 20s
CI Pipeline / frontend-build (pull_request) Failing after 12s
CI Pipeline / backend-lint (pull_request) Successful in 13s
CI Pipeline / quality-gate (push) Successful in 3s
CI Pipeline / quality-gate (pull_request) Successful in 3s
CI Pipeline / backend-test (push) Successful in 10m24s
CI Pipeline / frontend-test (push) Failing after 19s
CI Pipeline / frontend-build (push) Failing after 23s
CI Pipeline / backend-lint (push) Successful in 12s
CI Pipeline / backend-test (pull_request) Successful in 10m45s
CI Pipeline / frontend-test (pull_request) Failing after 20s
CI Pipeline / frontend-build (pull_request) Failing after 12s
CI Pipeline / backend-lint (pull_request) Successful in 13s
CI Pipeline / quality-gate (push) Successful in 3s
CI Pipeline / quality-gate (pull_request) Successful in 3s
- 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/
This commit is contained in:
1 parent
fdbc1d78da
commit
a783626f34
12 files changed
+197
-49
No files matched your search
@@ -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> {
|
||||
|
||||
@@ -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> {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in new issue
Block a user