Removed ui/ux and websites + upgrade to v22

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/ontvlambaar",
             "index": "src/index.html",
@@ -66,7 +66,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "ontvlambaar:build:production"
@@ -78,10 +78,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",

package.json

@@ -10,33 +10,33 @@
     "serve:ssr:ontvlambaar": "node dist/ontvlambaar/server/server.mjs"
   },
   "private": true,
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || ^26.0.0"
+  },
   "dependencies": {
-    "@angular/animations": "^19.2.25",
-    "@angular/common": "^19.2.25",
-    "@angular/compiler": "^19.2.25",
-    "@angular/core": "^19.2.25",
-    "@angular/forms": "^19.2.25",
-    "@angular/platform-browser": "^19.2.25",
-    "@angular/platform-browser-dynamic": "^19.2.25",
-    "@angular/platform-server": "^19.2.25",
-    "@angular/router": "^19.2.25",
-    "@angular/ssr": "^19.2.27",
+    "@angular/animations": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/platform-browser-dynamic": "^22.0.0",
+    "@angular/platform-server": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "@angular/ssr": "^22.0.0",
     "@lottiefiles/dotlottie-web": "^0.36.1",
     "express": "^4.18.2",
-    "install": "^0.13.0",
-    "npm": "^10.9.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.27",
-    "@angular/cli": "^19.2.27",
-    "@angular/compiler-cli": "^19.2.25",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^18.18.0",
-    "compression-webpack-plugin": "^11.1.0",
+    "@types/node": "^22.0.0",
     "gzipper": "^7.2.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
@@ -44,6 +44,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.2"
+    "typescript": "~6.0.0"
   }
 }

server.ts

@@ -1,57 +1,39 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
 import express from 'express';
-import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
+import { join } from 'node:path';
 
-// 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 browserDistFolder = join(import.meta.dirname, '../browser');
 
-  const commonEngine = new CommonEngine();
+const app = express();
+const angularApp = new AngularNodeAppEngine();
 
-  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, {
+app.use(
+  express.static(browserDistFolder, {
     maxAge: '1y',
-    index: 'index.html',
-  }));
+    index: false,
+    redirect: false,
+  }),
+);
 
-  // All regular routes use the Angular engine
-  server.get('**', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
+app.use((req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next(),
+    )
+    .catch(next);
+});
 
-    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 {
+if (isMainModule(import.meta.url) || process.env['pm_id']) {
   const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
+  app.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);
   });
 }
 
-run();
+export const reqHandler = createNodeRequestHandler(app);

src/app/about/about.component.html

@@ -14,7 +14,6 @@
     <li>Illustrator</li>
     <li class="indent">verpakkingen<span>10+</span></li>
     <li class="indent">logo's & huisstijlen<span>20+</span></li>
-    <li>UI/UX<span>5+</span></li>
   </ul>
  </div>
 </div>

src/app/about/about.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   padding: 2rem 0;

src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { HeroComponent } from "./hero/hero.component";
 import { HeaderComponent } from "./header/header.component";
 import { ServicesComponent } from "./services/services.component";
@@ -10,15 +10,21 @@ import { AboutComponent } from "./about/about.component";
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
+  imports: [HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Ontvlambaar';
   theme = "dark"
 
+  private readonly platformId = inject(PLATFORM_ID);
+
   private detectColorScheme(): void {
+    // if (!isPlatformBrowser(this.platformId)) {
+    //   return;
+    // }
+
     this.theme = localStorage.getItem("theme") ?? 'dark';
     document.documentElement.setAttribute("data-theme", this.theme);
   }
@@ -28,8 +34,13 @@ export class AppComponent {
   }
 
   themeChange(theme: string) {
-    localStorage.setItem("theme", theme);
     this.theme = theme;
+
+    // if (!isPlatformBrowser(this.platformId)) {
+    //   return;
+    // }
+
+    localStorage.setItem("theme", theme);
     document.documentElement.setAttribute("data-theme", this.theme);
   }
 }

src/app/app.config.server.ts

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

src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender,
+  },
+];

src/app/footer/footer.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   display: flex;

src/app/header/header.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 ul {
   list-style: none;

src/app/hero/hero.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   flex-direction: column;

src/app/portfolio/portfolio.component.html

@@ -12,10 +12,3 @@
   </div>
   <img src="assets/services/Branding-800.webp" alt="Zetwerk voorbeeld">
 </div>
-<div class="left">
-  <div>
-    <h2>UI/UX</h2>
-    <p>Een goede vormgeving gaat verder dan alleen mooi zijn; het moet ook gebruiksvriendelijk zijn. Met een sterk ontwerp voor jouw website zorg ik ervoor dat gebruikers moeiteloos hun weg vinden. Door een combinatie van esthetiek en functionaliteit creëer ik een intuïtieve ervaring die aansluit bij de behoeften van de gebruiker en het doel van jouw project.</p>
-  </div>
-  <img src="assets/services/UX-UI-800.webp" alt="Zetwerk voorbeeld">
-</div>

src/app/portfolio/portfolio.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   display: flex;

src/app/services/services.component.html

@@ -14,9 +14,4 @@
     <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
     <h2>Logo's en huisstijlen</h2>
   </div>
-  <div class="service">
-    <img src="assets/ui-ux-dark.svg" alt="UI/UX" class="only-on-dark" />
-    <img src="assets/ui-ux-light.svg" alt="UI/UX" class="only-on-light" />
-    <h2>UI/UX</h2>
-  </div>
 </div>

src/app/services/services.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars";
+@use "../../vars" as *;
 
 .wrapper {
   display: flex;
@@ -9,7 +9,6 @@
 
 .service {
   display: flex;
-  width: calc(50% - 1rem);
   height: 4rem;
   flex-shrink: 0;
   align-self: center;

src/app/toggle/toggle.component.ts

@@ -1,4 +1,5 @@
-import { Component, input, output, signal, WritableSignal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { AfterViewInit, Component, inject, input, output, PLATFORM_ID, signal, WritableSignal } from '@angular/core';
 import { DotLottie } from '@lottiefiles/dotlottie-web';
 
 @Component({
@@ -8,10 +9,12 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
   templateUrl: './toggle.component.html',
   styleUrl: './toggle.component.scss'
 })
-export class ToggleComponent {
+export class ToggleComponent implements AfterViewInit {
   private darkLottie: any = undefined;
   private lightLottie: any = undefined;
 
+  private readonly platformId = inject(PLATFORM_ID);
+
   toggleOn = output<boolean>();
   toggleValue = input<boolean>();
   private isChanging: WritableSignal<boolean> = signal<boolean>(false);
@@ -20,6 +23,10 @@ export class ToggleComponent {
 
 
   ngAfterViewInit(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
     this.isDarkMode.set(this.toggleValue());
     this.darkLottie = new DotLottie({
       autoplay: false,

src/index.html

@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <title>Ontvlambaar</title>
   <base href="/">
-  <meta name="description" content="Grafische vormgeving en zetwerk voor boeken, verpakkingen, logos, huisttijlen en UI/UX ">
-  <meta name="keywords" content="Graphic Designer, Design, Logo design, ontwerp, vormgeving, visitekaartjes, huisstijl, website, dtp, flyer, affiche, poster, magazine, boek, ontvlambaar, gent">
+  <meta name="description" content="Grafische vormgeving en zetwerk voor boeken, verpakkingen, logos en huisttijlen">
+  <meta name="keywords" content="Graphic Designer, Design, Logo design, ontwerp, vormgeving, visitekaartjes, huisstijl, dtp, flyer, affiche, poster, magazine, boek, ontvlambaar, gent, oost-vlaanderen, oost vlaanderen, vlaamse ardennen">
   <meta name="author" content="Lotte De Vlam (Ontvlambaar)">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/main.server.ts

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

tsconfig.json

@@ -15,10 +15,9 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
+    "module": "preserve",
     "lib": [
       "ES2022",
       "dom"