Switch to Angular SSR - Add Document Titles & Open Graph Meta Data

webapp/angular.json

@@ -56,7 +56,12 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "server.ts"
+            }
           },
           "configurations": {
             "production": {

webapp/package.json

@@ -13,7 +13,8 @@
     "prettier:check": "prettier --check src/",
     "prettier:write": "prettier --write src/",
     "lint": "eslint",
-    "lint:fix": "eslint --fix"
+    "lint:fix": "eslint --fix",
+    "serve:ssr:webapp": "node dist/webapp/server/server.mjs"
   },
   "private": true,
   "engines": {
@@ -28,7 +29,9 @@
     "@angular/forms": "18.2.1",
     "@angular/platform-browser": "18.2.1",
     "@angular/platform-browser-dynamic": "18.2.1",
+    "@angular/platform-server": "18.2.1",
     "@angular/router": "18.2.1",
+    "@angular/ssr": "^18.2.1",
     "@ng-icons/core": "29.5.0",
     "@ng-icons/lucide": "^26.3.0",
     "@ng-icons/octicons": "29.5.0",
@@ -63,6 +66,7 @@
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
     "embla-carousel-angular": "^14.0.0",
+    "express": "^4.18.2",
     "keycloak-js": "^26.0.0",
     "lucide-angular": "0.429.0",
     "ngx-scrollbar": "^13.0.1",
@@ -90,7 +94,9 @@
     "@storybook/angular": "8.3.4",
     "@storybook/blocks": "8.3.4",
     "@storybook/test": "8.3.4",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "5.1.4",
+    "@types/node": "^18.18.0",
     "@typescript-eslint/eslint-plugin": "8.2.0",
     "@typescript-eslint/parser": "8.2.0",
     "chromatic": "11.7.1",
@@ -106,4 +112,4 @@
     "storybook": "8.3.4",
     "typescript": "5.5.4"
   }
-}
+}

webapp/server.ts

@@ -0,0 +1,60 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import bootstrap from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', browserDistFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get(
+    '**',
+    express.static(browserDistFolder, {
+      maxAge: '1y',
+      index: 'index.html'
+    })
+  );
+
+  // All regular routes use the Angular engine
+  server.get('**', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }]
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4200;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+run();

webapp/src/app/app.config.server.ts

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

webapp/src/app/app.config.ts

@@ -1,13 +1,14 @@
 import { APP_INITIALIZER, ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, TitleStrategy } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { provideAngularQuery, QueryClient } from '@tanstack/angular-query-experimental';
 import { environment } from 'environments/environment';
 import { BASE_PATH } from 'app/core/modules/openapi';
 import { routes } from 'app/app.routes';
 import { AnalyticsService } from './analytics.service';
 import { securityInterceptor } from './core/security/security-interceptor';
+import { TemplatePageTitleStrategy } from './core/TemplatePageTitleStrategy';
 
 function initializeAnalytics(analyticsService: AnalyticsService): () => void {
   return () => {
@@ -20,9 +21,10 @@ export const appConfig: ApplicationConfig = {
     provideExperimentalZonelessChangeDetection(),
     provideRouter(routes),
     provideAngularQuery(new QueryClient()),
-    provideHttpClient(withInterceptors([securityInterceptor])),
+    provideHttpClient(withInterceptors([securityInterceptor]), withFetch()),
     provideAnimationsAsync(),
     { provide: BASE_PATH, useValue: environment.serverUrl },
-    { provide: APP_INITIALIZER, useFactory: initializeAnalytics, multi: true, deps: [AnalyticsService] }
+    { provide: APP_INITIALIZER, useFactory: initializeAnalytics, multi: true, deps: [AnalyticsService] },
+    { provide: TitleStrategy, useClass: TemplatePageTitleStrategy }
   ]
 };

webapp/src/app/app.routes.ts

@@ -6,12 +6,13 @@ import { AdminGuard } from '@app/core/security/admin.guard';
 import { UserProfileComponent } from '@app/user/user-profile.component';
 
 export const routes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'about', component: AboutComponent },
+  { path: '', component: HomeComponent, title: 'Home', data: { meta: { description: 'Artemis Leaderboard - Hephaestus' } } },
+  { path: 'about', component: AboutComponent, title: 'About', data: { meta: { description: 'About Hephaestus' } } },
   {
     path: 'admin',
     component: AdminComponent,
-    canActivate: [AdminGuard]
+    canActivate: [AdminGuard],
+    title: 'Admin'
   },
-  { path: 'user/:id', component: UserProfileComponent }
+  { path: 'user/:id', component: UserProfileComponent, data: { meta: { description: 'User Profile - Hephaestus' } } }
 ];

webapp/src/app/core/TemplatePageTitleStrategy.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
+
+@Injectable({ providedIn: 'root' })
+export class TemplatePageTitleStrategy extends TitleStrategy {
+  constructor(
+    private readonly title: Title,
+    private metaService: Meta
+  ) {
+    super();
+  }
+  override updateTitle(routerState: RouterStateSnapshot) {
+    // Update document title
+    const id = routerState.root.firstChild?.paramMap.get('id');
+    const titleParam = id ?? this.buildTitle(routerState);
+    const title = titleParam ? `${titleParam} | Hephaestus` : 'Hephaestus';
+    this.title.setTitle(title);
+
+    // Update meta tags
+    const metaTags = routerState.root.firstChild?.data['meta'];
+    if (metaTags) {
+      const iconURL = 'https://github.com/ls1intum/Hephaestus/raw/refs/heads/develop/docs/images/hammer.svg';
+      this.metaService.updateTag({ name: 'description', content: metaTags.description });
+      this.metaService.updateTag({ property: 'og:type', content: 'website' });
+      this.metaService.updateTag({ property: 'og:title', content: title });
+      this.metaService.updateTag({ property: 'og:description', content: metaTags.description });
+      this.metaService.updateTag({ property: 'og:image', content: iconURL });
+      this.metaService.updateTag({ property: 'og:image:width', content: '67' });
+      this.metaService.updateTag({ property: 'og:image:height', content: '60' });
+      this.metaService.updateTag({ property: 'og:url', content: 'https://hephaestus.ase.cit.tum.de' + routerState.url });
+
+      // this.metaService.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
+      this.metaService.updateTag({ name: 'twitter:title', content: title });
+      this.metaService.updateTag({ name: 'twitter:description', content: metaTags.description });
+      this.metaService.updateTag({ name: 'twitter:image', content: iconURL });
+      this.metaService.updateTag({ name: 'twitter:image:width', content: '67' });
+      this.metaService.updateTag({ name: 'twitter:image:height', content: '60' });
+    }
+  }
+}

webapp/src/app/core/header/header.component.html

@@ -5,7 +5,7 @@
   </a>
   <app-request-feature class="hidden sm:inline-block" />
   <app-request-feature class="sm:hidden" iconOnly />
-  <app-theme-switcher />
+  <!-- <app-theme-switcher /> -->
   @if (signedIn()) {
     <button [brnMenuTriggerFor]="usermenu" class="ml-2">
       <hlm-avatar>

webapp/src/main.server.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

webapp/tsconfig.app.json

@@ -4,10 +4,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "files": [
-    "src/main.ts"
+    "src/main.ts",
+    "src/main.server.ts",
+    "server.ts"
   ],
   "include": [
     "src/**/*.d.ts"