setup Angular app and integrate Docker image build in docker-compose.yml

Makefile

@@ -1,10 +1,12 @@
 kontor_api := kontor-api
 kontor_spring := kontor-spring
-kontor_servicemix := kontor-servicemix
+kontor_angular := kontor-angular
+TARGET=docker
 
-.PHONY: all $(kontor_spring) $(kontor_api)
+.PHONY: all $(kontor_spring) $(kontor_api) $(kontor_angular)
-all: $(kontor_spring) $(kontor_api) $(kontor_servicemix)
 
-$(kontor_spring) $(kontor_api) $(kontor_servicemix):
+all: $(kontor_spring) $(kontor_api) $(kontor_angular)
+
+$(kontor_spring) $(kontor_api) $(kontor_angular):
 	$(MAKE) --directory=$@ $(TARGET)
 

docker-compose.yml

@@ -83,6 +83,18 @@ services:
     depends_on:
       postgres:
         condition: service_healthy
+  kontor-angular:
+    image: kontor-angular:0.2.0-SNAPSHOT
+    restart: unless-stopped
+    networks:
+      - database
+      - integration
+      - frontend
+    ports:
+      - 8200:80
+    depends_on:
+      postgres:
+        condition: service_healthy
 networks:
   database:
   integration:

kontor-angular/.dockerignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+

kontor-angular/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

kontor-angular/Dockerfile

@@ -0,0 +1,14 @@
+### STAGE 1: Build ###
+FROM node:22.15-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+### STAGE 2: Run ###
+FROM nginx:1.17.1-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist/kontor-angular/browser /usr/share/nginx/html
+EXPOSE 80
+

kontor-angular/Makefile

@@ -0,0 +1,8 @@
+.PHONY: docker dev
+
+docker:
+	docker build -t kontor-angular:0.2.0-SNAPSHOT .
+
+dev:
+	ng serve
+

kontor-angular/README.md

@@ -1,6 +1,6 @@
 # KontorAngular
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.1.
 
 ## Development server
 

kontor-angular/angular.json

@@ -5,7 +5,11 @@
   "projects": {
     "kontor-angular": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -14,10 +18,8 @@
           "builder": "@angular/build:application",
           "options": {
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
             "assets": [
               {
                 "glob": "**/*",
@@ -25,7 +27,7 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ]
           },
           "configurations": {
@@ -70,11 +72,8 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
             "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
             "assets": [
               {
                 "glob": "**/*",
@@ -82,7 +81,7 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ]
           }
         }

kontor-angular/nginx.conf

@@ -0,0 +1,37 @@
+server {
+    # Root-Verzeichnis für den Server setzen (wir kopieren unsere Anwendung hierher)
+    root /usr/share/nginx/html;
+
+    # Definieren der Standard-Indexdatei (Angular erstellt die Datei index.html für uns und sie befindet sich im oben genannten Verzeichnis)
+    index index.html;
+
+    # Cache-Header für Medien-ASsets
+    location ~* \.(?:cur|jpe?g|gif|htc|ico|png|xml|otf|ttf|eot|woff|woff2|svg)$ {
+        access_log    off;
+        add_header Pragma "must-revalidate, public";
+        add_header Cache-Control "must-revalidate, public";
+        expires       max;
+
+        tcp_nodelay off;
+    }
+
+    # Cache-Header für HTML, CSS und JS-Dateien
+    location ~* \.(?:css|js|html)$ {
+        access_log    off;
+        add_header Pragma "must-revalidate, public";
+        add_header Cache-Control "must-revalidate, public";
+        expires       2d;
+
+        tcp_nodelay off;
+    }
+
+    # Konfiguration für den /-Pfad
+    location / {
+        # Zunächst versuchen wir die angeforderte URI auzuliefern
+        # Klappt das nicht, versuchen wir es mit einem abschließenden Slash
+        # Klappt auch das nicht, liefern wir die index.html aus.
+        # Das ist nötig, damit Angular-Routen korrekt augeflöst und ausgeliefert werden
+        try_files $uri $uri/ /index.html;
+    }
+}
+

kontor-angular/package-lock.json

@@ -15,12 +15,11 @@
         "@angular/platform-browser": "^20.1.0",
         "@angular/router": "^20.1.0",
         "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
+        "tslib": "^2.3.0"
-        "zone.js": "~0.15.0"
       },
       "devDependencies": {
-        "@angular/build": "^20.1.0",
+        "@angular/build": "^20.1.1",
-        "@angular/cli": "^20.1.0",
+        "@angular/cli": "^20.1.1",
         "@angular/compiler-cli": "^20.1.0",
         "@types/jasmine": "~5.1.0",
         "jasmine-core": "~5.8.0",
@@ -9518,12 +9517,6 @@
       "peerDependencies": {
         "zod": "^3.24.1"
       }
-    },
-    "node_modules/zone.js": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
-      "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT"
     }
   }
 }

kontor-angular/package.json

@@ -27,12 +27,11 @@
     "@angular/platform-browser": "^20.1.0",
     "@angular/router": "^20.1.0",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.0"
-    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.0",
+    "@angular/build": "^20.1.1",
-    "@angular/cli": "^20.1.0",
+    "@angular/cli": "^20.1.1",
     "@angular/compiler-cli": "^20.1.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.8.0",

kontor-angular/src/app/app.config.ts

@@ -1,4 +1,4 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -6,7 +6,7 @@ import { routes } from './app.routes';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideZonelessChangeDetection(),
     provideRouter(routes)
   ]
 };

kontor-angular/src/app/app.html

@@ -124,6 +124,7 @@
     line-height: 1.4rem;
     letter-spacing: -0.00875rem;
     text-decoration: none;
+    white-space: nowrap;
   }
 
   .pill:hover {

kontor-angular/src/app/app.spec.ts

@@ -1,3 +1,4 @@
+import { provideZonelessChangeDetection } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { App } from './app';
 
@@ -5,6 +6,7 @@ describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideZonelessChangeDetection()]
     }).compileComponents();
   });
 

kontor-angular/src/app/app.ts

@@ -5,7 +5,7 @@ import { RouterOutlet } from '@angular/router';
   selector: 'app-root',
   imports: [RouterOutlet],
   templateUrl: './app.html',
-  styleUrl: './app.css'
+  styleUrl: './app.scss'
 })
 export class App {
   protected readonly title = signal('kontor-angular');

kontor-scripts/download.py

@@ -89,7 +89,7 @@ def rename_file(file_info: dict):
     item_id = file_info['id']
     file_name = file_info['file_name']
     if file_name is None:
-        log.info("file_anme is not set, rename is not executed")
+        log.info("file_name is not set, rename is not executed")
         return
     file = Path(args.dir, file_name)
     new_file_path = file.with_name(f"{item_id}{file.suffix}")