src/app/app.routes.ts

@@ -1,20 +1,19 @@
 import { Routes } from '@angular/router';
-import {AboutComponent} from './pages/about/about.component';
 import {RouterConstants} from './constants/RouterConstants';
 
 export const routes: Routes = [
-  { path: '', component: AboutComponent },
-  { path: RouterConstants.ABOUT.PATH, component: RouterConstants.ABOUT.COMPONENT},
-  { path: RouterConstants.PROJECTS.PATH, component: RouterConstants.PROJECTS.COMPONENT},
-  { path: RouterConstants.ALGORITHMS.PATH, component: RouterConstants.ALGORITHMS.COMPONENT},
-  { path: RouterConstants.PATHFINDING.PATH, component: RouterConstants.PATHFINDING.COMPONENT},
-  { path: RouterConstants.SORTING.PATH, component: RouterConstants.SORTING.COMPONENT},
-  { path: RouterConstants.IMPRINT.PATH, component: RouterConstants.IMPRINT.COMPONENT},
-  { path: RouterConstants.GOL.PATH, component: RouterConstants.GOL.COMPONENT},
-  { path: RouterConstants.LABYRINTH.PATH, component: RouterConstants.LABYRINTH.COMPONENT},
-  { path: RouterConstants.FRACTAL.PATH, component: RouterConstants.FRACTAL.COMPONENT},
-  { path: RouterConstants.FRACTAL3d.PATH, component: RouterConstants.FRACTAL3d.COMPONENT},
-  { path: RouterConstants.PENDULUM.PATH, component: RouterConstants.PENDULUM.COMPONENT},
-  { path: RouterConstants.CLOTH.PATH, component: RouterConstants.CLOTH.COMPONENT}
+  { path: '', loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
+  { path: RouterConstants.ABOUT.PATH, loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
+  { path: RouterConstants.PROJECTS.PATH, loadComponent: () => import('./pages/projects/projects.component').then(m => m.ProjectsComponent) },
+  { path: RouterConstants.ALGORITHMS.PATH, loadComponent: () => import('./pages/algorithms/algorithms.component').then(m => m.AlgorithmsComponent) },
+  { path: RouterConstants.PATHFINDING.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/pathfinding.component').then(m => m.PathfindingComponent) },
+  { path: RouterConstants.SORTING.PATH, loadComponent: () => import('./pages/algorithms/sorting/sorting.component').then(m => m.SortingComponent) },
+  { path: RouterConstants.IMPRINT.PATH, loadComponent: () => import('./pages/imprint/imprint.component').then(m => m.ImprintComponent) },
+  { path: RouterConstants.GOL.PATH, loadComponent: () => import('./pages/algorithms/conway-gol/conway-gol.component').then(m => m.ConwayGolComponent) },
+  { path: RouterConstants.LABYRINTH.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/labyrinth/labyrinth.component').then(m => m.LabyrinthComponent) },
+  { path: RouterConstants.FRACTAL.PATH, loadComponent: () => import('./pages/algorithms/fractal/fractal.component').then(m => m.FractalComponent) },
+  { path: RouterConstants.FRACTAL3d.PATH, loadComponent: () => import('./pages/algorithms/fractal3d/fractal3d.component').then(m => m.Fractal3dComponent) },
+  { path: RouterConstants.PENDULUM.PATH, loadComponent: () => import('./pages/algorithms/pendulum/pendulum.component').then(m => m.default) },
+  { path: RouterConstants.CLOTH.PATH, loadComponent: () => import('./pages/algorithms/cloth/cloth.component').then(m => m.ClothComponent) },
 ];
 

src/app/constants/RouterConstants.ts

@@ -1,88 +1,63 @@
-import {AboutComponent} from '../pages/about/about.component';
-import {ProjectsComponent} from '../pages/projects/projects.component';
-import {ImprintComponent} from '../pages/imprint/imprint.component';
-import {AlgorithmsComponent} from '../pages/algorithms/algorithms.component';
-import {PathfindingComponent} from '../pages/algorithms/pathfinding/pathfinding.component';
-import {SortingComponent} from '../pages/algorithms/sorting/sorting.component';
-import {ConwayGolComponent} from '../pages/algorithms/conway-gol/conway-gol.component';
-import {LabyrinthComponent} from '../pages/algorithms/pathfinding/labyrinth/labyrinth.component';
-import {FractalComponent} from '../pages/algorithms/fractal/fractal.component';
-import {Fractal3dComponent} from '../pages/algorithms/fractal3d/fractal3d.component';
-import PendulumComponent from '../pages/algorithms/pendulum/pendulum.component';
-import {ClothComponent} from '../pages/algorithms/cloth/cloth.component';
-
-export class RouterConstants {
+export class RouterConstants {
 
   static readonly ABOUT = {
     PATH: 'about',
     LINK: '/about',
-    COMPONENT: AboutComponent
   };
 
   static readonly PROJECTS = {
     PATH: 'projects',
     LINK: '/projects',
-    COMPONENT: ProjectsComponent
   };
 
   static readonly ALGORITHMS = {
     PATH: 'algorithms',
     LINK: '/algorithms',
-    COMPONENT: AlgorithmsComponent
   };
 
   static readonly PATHFINDING = {
     PATH: 'algorithms/pathfinding',
     LINK: '/algorithms/pathfinding',
-    COMPONENT: PathfindingComponent
   };
 
   static readonly SORTING = {
     PATH: 'algorithms/sorting',
     LINK: '/algorithms/sorting',
-    COMPONENT: SortingComponent
   };
 
   static readonly GOL = {
     PATH: 'algorithms/gol',
     LINK: '/algorithms/gol',
-    COMPONENT: ConwayGolComponent
   };
 
   static readonly LABYRINTH = {
     PATH: 'algorithms/labyrinth',
     LINK: '/algorithms/labyrinth',
-    COMPONENT: LabyrinthComponent
   };
 
   static readonly FRACTAL = {
     PATH: 'algorithms/fractal',
     LINK: '/algorithms/fractal',
-    COMPONENT: FractalComponent
   };
 
   static readonly FRACTAL3d = {
     PATH: 'algorithms/fractal3d',
     LINK: '/algorithms/fractal3d',
-    COMPONENT: Fractal3dComponent
   };
 
   static readonly PENDULUM = {
     PATH: 'algorithms/pendulum',
     LINK: '/algorithms/pendulum',
-    COMPONENT: PendulumComponent
   };
 
   static readonly CLOTH = {
     PATH: 'algorithms/cloth',
     LINK: '/algorithms/cloth',
-    COMPONENT: ClothComponent
   };
 
   static readonly IMPRINT = {
     PATH: 'imprint',
     LINK: '/imprint',
-    COMPONENT: ImprintComponent
   };
 }
 

src/app/layout/app/app.component.ts

@@ -7,7 +7,6 @@ import {ParticleBackgroundComponent} from '../../shared/components/particles-bac
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [RouterOutlet, TopbarComponent, TranslatePipe, ParticleBackgroundComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'

src/app/layout/imageDialog/image.component.ts

@@ -4,7 +4,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-  standalone: true,
   imports: [MatDialogModule, MatButtonModule, MatIconModule],
   template: `
     <div class="dialog">

src/app/layout/topbar/topbar.component.ts

@@ -14,7 +14,6 @@ import {RouterConstants} from '../../constants/RouterConstants';
 
 @Component({
   selector: 'app-topbar',
-  standalone: true,
   imports: [
     RouterLink,
     MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule, MatTooltipModule,

src/app/pages/about/about.component.ts

@@ -14,7 +14,6 @@ import {SharedFunctions} from '../../shared/SharedFunctions';
 
 @Component({
   selector: 'app-about',
-  standalone: true,
   imports: [
     NgOptimizedImage,
     MatCardModule,

src/app/pages/algorithms/algorithms.component.html

@@ -2,7 +2,7 @@
 <h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
 </div>
 <div class="card-grid">
-@for (category of categories$ | async; track category.id) {
+@for (category of categories; track category.id) {
     <mat-card class="algo-card" [routerLink]="[category.routerLink]">
       <mat-card-header>
         <mat-card-title>{{ category.title | translate }}</mat-card-title>

src/app/pages/algorithms/algorithms.component.ts

@@ -1,8 +1,6 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { AlgorithmsService } from './algorithms.service';
 import { AlgorithmCategory } from './algorithm-category';
-import { Observable } from 'rxjs';
-import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { MatCardModule } from '@angular/material/card';
 import {TranslatePipe} from '@ngx-translate/core';
@@ -10,16 +8,11 @@ import {TranslatePipe} from '@ngx-translate/core';
 @Component({
   selector: 'app-algorithms',
   templateUrl: './algorithms.component.html',
-  styleUrls: ['./algorithms.component.scss'],
-  standalone: true,
-  imports: [CommonModule, RouterLink, MatCardModule, TranslatePipe],
+  styleUrl: './algorithms.component.scss',
+  imports: [RouterLink, MatCardModule, TranslatePipe],
 })
-export class AlgorithmsComponent implements OnInit {
+export class AlgorithmsComponent {
   private readonly algorithmsService = inject(AlgorithmsService);
 
-  categories$: Observable<AlgorithmCategory[]> | undefined;
-
-  ngOnInit(): void {
-    this.categories$ = this.algorithmsService.getCategories();
-  }
+  readonly categories: AlgorithmCategory[] = this.algorithmsService.getCategories();
 }

src/app/pages/algorithms/algorithms.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { AlgorithmCategory } from './algorithm-category';
-import { Observable, of } from 'rxjs';
 import {RouterConstants} from '../../constants/RouterConstants';
 
 @Injectable({
@@ -59,7 +58,7 @@ export class AlgorithmsService {
     }
   ];
 
-  getCategories(): Observable<AlgorithmCategory[]> {
-    return of(this.categories);
+  getCategories(): AlgorithmCategory[] {
+    return this.categories;
   }
 }

src/app/pages/algorithms/pathfinding/pathfinding.component.ts

@@ -6,6 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 import {TranslateModule, TranslateService} from '@ngx-translate/core';
 
@@ -27,7 +28,6 @@ enum NodeType {
 
 @Component({
   selector: 'app-pathfinding',
-  standalone: true,
   imports: [
     CommonModule,
     FormsModule,
@@ -48,6 +48,7 @@ enum NodeType {
 export class PathfindingComponent implements AfterViewInit {
   private readonly pathfindingService = inject(PathfindingService);
   private readonly translate = inject(TranslateService);
+  private readonly snackBar = inject(MatSnackBar);
 
   readonly NodeType = NodeType;
   readonly MIN_GRID_SIZE = MIN_GRID_SIZE;
@@ -483,7 +484,8 @@ export class PathfindingComponent implements AfterViewInit {
       return true;
     }
 
-    alert(this.translate.instant('PATHFINDING.ALERT.START_END_NODES'));
+    const message = this.translate.instant('PATHFINDING.ALERT.START_END_NODES');
+    this.snackBar.open(message, 'OK', { duration: 5000, horizontalPosition: 'center', verticalPosition: 'top' });
     return false;
   }
 

src/app/pages/algorithms/sorting/sorting.component.ts

@@ -15,10 +15,9 @@ import {AlgorithmInformation} from '../information/information.models';
 import {Information} from '../information/information';
 @Component({
   selector: 'app-sorting',
-  standalone: true,
   imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslateModule, FormsModule, MatInput, Information],
   templateUrl: './sorting.component.html',
-  styleUrls: ['./sorting.component.scss']
+  styleUrl: './sorting.component.scss'
 })
 export class SortingComponent implements OnInit {
 

src/app/pages/projects/dialog/project-dialog.component.ts

@@ -15,8 +15,7 @@ import {MatButton} from '@angular/material/button';
 @Component({
   selector: 'app-project-dialog',
   templateUrl: './project-dialog.component.html',
-  styleUrls: ['./project-dialog.component.scss'],
-  standalone: true,
+  styleUrl: './project-dialog.component.scss',
   imports: [
     MatDialogTitle,
     MatDialogContent,

src/app/pages/projects/projects.component.ts

@@ -34,7 +34,6 @@ export interface Projects {
 
 @Component({
   selector: 'app-projects',
-  standalone: true,
   imports: [
     MatCardModule,
     MatChipsModule,

src/app/service/language.service.ts

@@ -10,10 +10,9 @@ export class LanguageService {
   readonly lang = signal<Lang>(this.getInitial());
 
   constructor() {
-    this.translate.addLangs(['de', 'en']);
-    this.translate.setFallbackLang('en');
-    this.lang.set(this.getInitial());
-    this.use(this.lang());
+    // translate service lang and fallback are already configured via provideTranslateService in app.config
+    // just ensure the stored preference is active on startup
+    this.translate.use(this.lang());
   }
 
   use(l: Lang) {

src/app/service/reload.service.ts

@@ -1,26 +0,0 @@
-import { Injectable, NgZone, signal } from '@angular/core';
-import {LocalStoreConstants} from '../constants/LocalStoreConstants';
-
-
-@Injectable({ providedIn: 'root' })
-export class ReloadService {
-  private readonly _reloadTick = signal(0);
-  readonly reloadTick = this._reloadTick.asReadonly();
-
-  private readonly _languageChangedTick = signal(0);
-  readonly languageChangedTick = this._languageChangedTick.asReadonly();
-
-
-
-
-  private informListeners(e: StorageEvent, zone: NgZone) {
-    if (e.key === LocalStoreConstants.LANGUAGE_KEY) {
-      zone.run(() => this._languageChangedTick.update(v => v + 1));
-    }
-  }
-
-  bumpLanguageChanged(): void {
-    this._reloadTick.update(v => v + 1);
-    localStorage.setItem(LocalStoreConstants.RELOAD_ALL_LANG_LISTENER_KEY, String(Date.now()));
-  }
-}

src/app/shared/components/generic-grid/generic-grid.ts

@@ -5,7 +5,6 @@ export interface GridPos { row: number; col: number }
 
 @Component({
   selector: 'app-generic-grid',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './generic-grid.html',
   styleUrl: './generic-grid.scss',
@@ -36,7 +35,7 @@ export class GenericGridComponent implements AfterViewInit {
   grid: any[][] = [];
 
   isDrawing = false;
-  private lastCell: GridPos | null = null;
+  protected lastCell: GridPos | null = null;
 
   ngAfterViewInit(): void {
     this.ctx = this.getContextOrThrow();