tillkuhn · tillkuhn · Dec 27, 2025 · Dec 27, 2025 · Dec 27, 2025 · Dec 27, 2025
diff --git a/.github/workflows/angular.yml b/.github/workflows/angular.yml
@@ -53,8 +53,8 @@ jobs:
         working-directory: ./angular
         run: |
           npm install -g yarn
-          # workaround _lruCache is not a constructor issue https://stackoverflow.com/a/79581379/4292075
-          rm -rf node_modules/@babel/
+          # uncomment the following line to force-clean node_modules/, e.g. in case of cache issues
+          # rm -rf node_modules/
           yarn install
           yarn run test:coverage
           yarn run build:prod

diff --git a/angular/README.md b/angular/README.md
@@ -259,16 +259,87 @@ See also [Runtime errors when using buildOptimizer. JIT compilation broken](http
 
 ### Update Angular Material 17
 
+migrate to mdc components, see  https://v15.material.angular.dev/guide/mdc-migration
+
+```
+ng generate @angular/material:mdc-migration
+? Limit the migration to a specific directory? (Enter the relative path such as 'src/app/shared' or leave blank for all directories) src
+? What components do you want to migrate? Button, Card, Checkbox, Chips, Dialog, Form Field, Input, Select, Autocomplete, List, Menu, Paginator, Progress Bar, Progress Spinner,
+Radio, Slide Toggle, Slider, Snack Bar, Table, Tabs, Tooltip
+    Limiting migration to: src
+    Migrating components:
+    button
+    card
+    checkbox
+    chips
+    dialog
+    form-field
+    list
+    menu
+    paginator
+    progress-bar
+    progress-spinner
+    radio
+    slide-toggle
+    slider
+    snack-bar
+    table
+    tabs
+    tooltip
+    autocomplete
+    input
+    option
+    optgroup
+    select
+    Migrating project: angkor-ui
+    Successfully migrated the project.
+UPDATE src/app/areas/area-tree.component.html (3660 bytes)
+UPDATE src/app/clouds/cloud/cloud.component.html (584 bytes)
+UPDATE src/app/dishes/add/dish-add.component.html (1520 bytes)
+UPDATE src/app/dishes/detail/dish-detail.component.html (2985 bytes)
+UPDATE src/app/dishes/edit/dish-edit.component.html (4906 bytes)
+UPDATE src/app/dishes/list/dishes.component.html (3948 bytes)
+UPDATE src/app/admin/events/events.component.html (1546 bytes)
+UPDATE src/app/links/feeds/feed.component.html (1842 bytes)
+UPDATE src/app/home/home.component.html (2297 bytes)
+UPDATE src/app/locatables/search/location-search.component.html (6926 bytes)
+UPDATE src/app/admin/metrics/metrics.component.html (1322 bytes)
+UPDATE src/app/myprofile/my-profile.component.html (1272 bytes)
+UPDATE src/app/notes/list/notes.component.html (3432 bytes)
+UPDATE src/app/places/add/place-add.component.html (1353 bytes)
+UPDATE src/app/places/detail/place-detail.component.html (3007 bytes)
+UPDATE src/app/places/edit/place-edit.component.html (5493 bytes)
+UPDATE src/app/radio/radio.component.html (5712 bytes)
+UPDATE src/app/myprofile/remove-me.component.html (640 bytes)
+UPDATE src/app/shared/components/tag-input/tag-input.component.html (1137 bytes)
+UPDATE src/app/shared/components/common.component.scss (1421 bytes)
+UPDATE src/app/home/home.component.scss (1217 bytes)
+UPDATE src/styles.scss (7429 bytes)
+UPDATE src/app/app.module.ts (7939 bytes)
+UPDATE src/app/shared/modules/material.module.ts (2870 bytes)
+UPDATE src/app/locatables/search/location-search.component.ts (12504 bytes)
+UPDATE src/app/shared/modules/imagine/file-upload/file-upload.component.ts (6364 bytes)
+UPDATE src/app/locatables/location-details.component.ts (4636 bytes)
+UPDATE src/app/shared/components/tag-input/tag-input.component.ts (5546 bytes)
+UPDATE src/app/dishes/detail/dish-detail.component.ts (2441 bytes)
+UPDATE src/app/notes/list/notes.component.ts (8573 bytes)
+UPDATE src/app/areas/area-tree.component.ts (2553 bytes)
+UPDATE src/app/places/detail/place-detail.component.ts (2519 bytes)
+UPDATE src/app/myprofile/my-profile.component.ts (2710 bytes)
+UPDATE src/app/notes/detail/note-details.component.ts (5022 bytes)
+UPDATE src/app/shared/components/confirm-dialog/confirm-dialog.component.ts (1765 bytes)
+UPDATE src/app/shared/services/notification.service.ts (2640 bytes)
+```
+Run Actual Material 17 update
+
 ```
-$ ng update @angular/material@17
-Node.js version v25.2.1 detected.
-Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
+ng update @angular/material@17
 Using package manager: yarn
 Collecting installed dependencies...
 Found 44 dependencies.
 Fetching dependency metadata from registry...
-Updating package.json with dependency @angular/cdk @ "17.3.10" (was "16.2.14")...
-Updating package.json with dependency @angular/material @ "17.3.10" (was "16.2.14")...
+    Updating package.json with dependency @angular/cdk @ "17.3.10" (was "16.2.14")...
+    Updating package.json with dependency @angular/material @ "17.3.10" (was "16.2.14")...
 UPDATE package.json (3796 bytes)
 ✔ Packages successfully installed.
 ** Executing migrations of package '@angular/cdk' **
@@ -277,17 +348,39 @@ UPDATE package.json (3796 bytes)
 
       ✓  Updated Angular CDK to version 17
 
-Migration completed (No changes made).
+  Migration completed (No changes made).
 
 ** Executing migrations of package '@angular/material' **
 
 ❯ Updates Angular Material to v17.
-Cannot update to Angular Material v17 because the project is using the legacy Material components
-that have been deleted. While Angular Material v16 is compatible with Angular v17, it is recommended
-to switch away from the legacy components as soon as possible because they no longer receive bug fixes,
-accessibility improvements and new features.
+    Cannot update to Angular Material v17 because the project is using the legacy Material components
+    that have been deleted. While Angular Material v16 is compatible with Angular v17, it is recommended
+    to switch away from the legacy components as soon as possible because they no longer receive bug fixes,
+    accessibility improvements and new features.
 
     Read more about migrating away from legacy components: https://material.angular.io/guide/mdc-migration
+
+    Files in the project using legacy Material components:
+     - /src/app/app.component.spec.ts (OK)
+     - /src/app/admin/metrics/metrics.component.spec.ts
+     - /src/app/areas/area-tree.component.spec.ts
+     - /src/app/dishes/detail/dish-detail.component.spec.ts
+     - /src/app/locatables/search/location-search.component.spec.ts
+     - /src/app/locatables/tours/tour-details.component.spec.ts
+     - /src/app/myprofile/my-profile.component.spec.ts
+     - /src/app/notes/detail/note-details.component.spec.ts
+     - /src/app/notes/list/notes.component.spec.ts
+     - /src/app/places/detail/place-detail.component.spec.ts
+     - /src/app/radio/radio.component.spec.ts
+     - /src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts
+     - /src/app/shared/components/coordindates/input/coordinates-input.component.spec.ts
+     - /src/app/shared/components/tag-input/tag-input.component.spec.ts
+     - /src/app/shared/modules/imagine/file-upload/file-upload.component.spec.ts
+     - /src/app/shared/services/notification.service.spec.ts
+
+UPDATE package.json (3795 bytes)
+✔ Packages installed successfully.
+  Migration completed (1 file modified).
 ```
 
 

diff --git a/angular/package.json b/angular/package.json
@@ -40,12 +40,12 @@
   "//dependencies-comment-angular": "For angular compatibility to typescript, rxjs etc. check: https://github.com/angular/angular/blob/master/package.json + https://angular.io/guide/versions",
   "dependencies": {
     "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^16.2.13",
+    "@angular/cdk": "^17.3.10",
     "@angular/common": "^17.3.12",
     "@angular/compiler": "^17.3.12",
     "@angular/core": "^17.3.12",
     "@angular/forms": "^17.3.12",
-    "@angular/material": "^16.2.13",
+    "@angular/material": "^17.3.10",
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
     "@angular/router": "^17.3.12",

diff --git a/angular/src/app/admin/events/events.component.html b/angular/src/app/admin/events/events.component.html
@@ -1,6 +1,6 @@
 <div class="app-full">
 
-  <mat-card class="app-card" style="width: 80%">
+  <mat-card appearance="outlined" class="app-card" style="width: 80%">
     <h3>
       💨 Topic Event Stream
     </h3>

diff --git a/angular/src/app/admin/metrics/metrics.component.html b/angular/src/app/admin/metrics/metrics.component.html
@@ -1,6 +1,6 @@
 <div class="app-flex">
 
-  <mat-card class="app-card">
+  <mat-card appearance="outlined" class="app-card">
 
     <h3><mat-icon matListIcon svgIcon="settings"></mat-icon>Admin Corner</h3>
 

diff --git a/angular/src/app/admin/metrics/metrics.component.spec.ts b/angular/src/app/admin/metrics/metrics.component.spec.ts
@@ -8,8 +8,8 @@ import {MetricsComponent} from '@app/admin/metrics/metrics.component';
 import {MatTableModule} from '@angular/material/table';
 import {RouterTestingModule} from '@angular/router/testing';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatDialog} from '@angular/material/dialog';
 
 describe('MetricsComponent', () => {
   let component: MetricsComponent;
@@ -21,7 +21,7 @@ describe('MetricsComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
       ],
       // Angular15 legacy hack
-      providers: [{provide: MatLegacySnackBar, useValue: {}}, {provide: MatLegacyDialog, useValue: {}}],
+      providers: [{provide: MatSnackBar, useValue: {}}, {provide: MatDialog, useValue: {}}],
       imports: [LoggerTestingModule, HttpClientTestingModule, MatIconTestingModule, MatSnackBarModule, MatTableModule, RouterTestingModule],
       declarations: [MetricsComponent],
       teardown: {destroyAfterEach: false}

diff --git a/angular/src/app/app.component.spec.ts b/angular/src/app/app.component.spec.ts
@@ -7,17 +7,17 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatDialog} from '@angular/material/dialog';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       // Angular15 legacy hack
       providers: [
-        {provide: MatLegacySnackBar, useValue: {}},
-        {provide: MatLegacyDialog, useValue: {}}
+        {provide: MatSnackBar, useValue: {}},
+        {provide: MatDialog, useValue: {}}
       ],
       imports: [
         RouterTestingModule, MatSnackBarModule, LoggerTestingModule, HttpClientTestingModule,

diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
@@ -29,7 +29,7 @@ import {LoadingInterceptor} from '@shared/services/loading.interceptor';
 import {LocationDetailsComponent} from '@app/locatables/location-details.component';
 import {LocationSearchComponent} from './locatables/search/location-search.component';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
-import {MAT_LEGACY_SNACK_BAR_DEFAULT_OPTIONS as MAT_SNACK_BAR_DEFAULT_OPTIONS} from '@angular/material/legacy-snack-bar';
+import {MAT_SNACK_BAR_DEFAULT_OPTIONS} from '@angular/material/snack-bar';
 import {MapComponent} from './map/map.component';
 import {MarkdownModule} from 'ngx-markdown';
 import {MaterialModule} from '@shared/modules/material.module'; // see separate module in shared/modules
@@ -55,7 +55,7 @@ import {VideoPlayerComponent} from './locatables/videos/video-player.component';
 import {NgxWebstorageModule} from 'ngx-webstorage';
 import {YouTubePlayerModule} from '@angular/youtube-player';
 import {RadioComponent} from './radio/radio.component';
-import {MatLegacySliderModule as MatSliderModule} from '@angular/material/legacy-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {RatingModule} from '@shared/modules/rating/rating.module';
 import { RemoveMeComponent } from './myprofile/remove-me.component';
 import { MAT_DATE_LOCALE } from '@angular/material/core';

diff --git a/angular/src/app/areas/area-tree.component.html b/angular/src/app/areas/area-tree.component.html
@@ -1,6 +1,6 @@
 <div class="app-flex">
 
-  <mat-card class="app-card">
+  <mat-card appearance="outlined" class="app-card">
     <mat-card-header>
       <mat-card-title>
         <mat-icon svgIcon="tree"></mat-icon>

diff --git a/angular/src/app/areas/area-tree.component.spec.ts b/angular/src/app/areas/area-tree.component.spec.ts
@@ -15,7 +15,7 @@ import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MatTreeModule} from '@angular/material/tree';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 describe('AreaTreeComponent', () => {
   let component: AreaTreeComponent;
@@ -28,7 +28,7 @@ describe('AreaTreeComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
       ],
       // Angular15 legacy hack
-      providers: [{provide: MatLegacySnackBar, useValue: {}}],
+      providers: [{provide: MatSnackBar, useValue: {}}],
       imports: [MatIconTestingModule, MatCardModule, RouterTestingModule, LoggerTestingModule, HttpClientTestingModule,
         MatIconModule, MatSelectModule, MatTreeModule,
         FormsModule, ReactiveFormsModule, MatSnackBarModule, MatInputModule, BrowserAnimationsModule, NgxWebstorageModule.forRoot()],

diff --git a/angular/src/app/areas/area-tree.component.ts b/angular/src/app/areas/area-tree.component.ts
@@ -4,7 +4,7 @@ import {Component, OnInit} from '@angular/core';
 import {DefaultErrorStateMatcher} from '@shared/helpers/form-helper';
 import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 import {ListItem} from '@shared/domain/list-item';
-import {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {MatTreeNestedDataSource} from '@angular/material/tree';
 import {NGXLogger} from 'ngx-logger';
 import {NestedTreeControl} from '@angular/cdk/tree';

diff --git a/angular/src/app/clouds/cloud/cloud.component.html b/angular/src/app/clouds/cloud/cloud.component.html
@@ -1,6 +1,6 @@
 <div class="app-full">
 
-  <mat-card class="app-card" style="width: 80%">
+  <mat-card appearance="outlined" class="app-card" style="width: 80%">
     <h3>
       <mat-icon matListIcon svgIcon="place"></mat-icon>
       TiMaFe ❤️ Places Cloud

diff --git a/angular/src/app/dishes/add/dish-add.component.html b/angular/src/app/dishes/add/dish-add.component.html
@@ -1,6 +1,6 @@
 <div class="app-flex">
 
-  <mat-card class="app-card">
+  <mat-card appearance="outlined" class="app-card">
     <mat-card-header>
       <mat-card-title>
         <mat-icon svgIcon="dish"></mat-icon>

diff --git a/angular/src/app/dishes/detail/dish-detail.component.html b/angular/src/app/dishes/detail/dish-detail.component.html
@@ -1,6 +1,6 @@
 <div class="app-flex">
 
-  <mat-card *ngIf="item" class="app-card">
+  <mat-card appearance="outlined" *ngIf="item" class="app-card">
 
     <mat-card-header>
 

diff --git a/angular/src/app/dishes/detail/dish-detail.component.spec.ts b/angular/src/app/dishes/detail/dish-detail.component.spec.ts
@@ -13,7 +13,7 @@ import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MarkdownModule} from 'ngx-markdown';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 // Angular15 fix
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 
 describe('DishDetailComponent', () => {
   let component: DishDetailComponent;
@@ -22,7 +22,7 @@ describe('DishDetailComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DishDetailComponent],
-      providers: [{provide: MatLegacyDialog, useValue: {}}],
+      providers: [{provide: MatDialog, useValue: {}}],
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA
       ],

diff --git a/angular/src/app/dishes/detail/dish-detail.component.ts b/angular/src/app/dishes/detail/dish-detail.component.ts
@@ -9,7 +9,7 @@ import {
   ConfirmDialogModel,
   ConfirmDialogResult
 } from '@shared/components/confirm-dialog/confirm-dialog.component';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {DishStoreService} from '../dish-store.service';
 
 @Component({

diff --git a/angular/src/app/dishes/edit/dish-edit.component.html b/angular/src/app/dishes/edit/dish-edit.component.html
@@ -1,6 +1,6 @@
 <div class="app-flex">
 
-  <mat-card class="app-card">
+  <mat-card appearance="outlined" class="app-card">
 
     <form (ngSubmit)="onFormSubmit()" [formGroup]="formData">
       <mat-form-field class="app-full-width">

diff --git a/angular/src/app/dishes/list/dishes.component.html b/angular/src/app/dishes/list/dishes.component.html
@@ -1,6 +1,6 @@
 <div class="app-flex">
 
-  <mat-card class="app-card">
+  <mat-card appearance="outlined" class="app-card">
 
     <div>
       <button *ngIf="authService.canEdit" [routerLink]="['/dishes/add']" color="primary" mat-mini-fab

diff --git a/angular/src/app/home/home.component.html b/angular/src/app/home/home.component.html
@@ -15,8 +15,8 @@ <h3>
   <div class="app-link">
 
 
-    <mat-card class="app-link app-card">
-      <mat-card-subtitle>WorldWideMap</mat-card-subtitle>
+    <mat-card appearance="outlined" class="app-link app-card">
+      <mat-card-subtitle class="app-link-subtitle">WorldWideMap</mat-card-subtitle>
       <mat-card-content>
         <a [routerLink]="['/map']"><img alt="world" src="/assets/icons/map.svg"/></a>&nbsp;
         <app-count-up [borderRadius]="countUpConfig.borderRadius" [digit]="counts.pois"
@@ -27,8 +27,8 @@ <h3>
       </mat-card-content>
     </mat-card>
 
-    <mat-card *ngFor="let entity of entityTypes" class="app-link app-card">
-      <mat-card-subtitle>{{entity.title}}</mat-card-subtitle> <!-- e.g. Places2Go -->
+    <mat-card appearance="outlined" *ngFor="let entity of entityTypes" class="app-link app-card">
+      <mat-card-subtitle class="app-link-subtitle">{{entity.title}}</mat-card-subtitle> <!-- e.g. Places2Go -->
       <mat-card-content>
         <!--   removed, logo is no longer centered-->
         <a [routerLink]="['/'+ entity.path]"><img [alt]="entity.name" [src]="entity.iconUrl"/></a>&nbsp;