Use loadComponent for routes and cleanup

Switch route definitions to lazy-load components via loadComponent dynamic imports and remove direct component references from RouterConstants. Remove several components' standalone flags and adjust component metadata (styleUrl vs styleUrls) and imports accordingly. Make AlgorithmsService and AlgorithmsComponent synchronous (getCategories() now returns an array and template iterates categories directly). Replace alert in PathfindingComponent with MatSnackBar and inject it. Simplify LanguageService initialization to use existing translate configuration. Remove unused ReloadService. Make GenericGridComponent.lastCell protected. Miscellaneous tidy-ups across related files.

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: '', loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
-  { path: RouterConstants.ABOUT.PATH, component: RouterConstants.ABOUT.COMPONENT},
+  { path: RouterConstants.ABOUT.PATH, loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
-  { path: RouterConstants.PROJECTS.PATH, component: RouterConstants.PROJECTS.COMPONENT},
+  { path: RouterConstants.PROJECTS.PATH, loadComponent: () => import('./pages/projects/projects.component').then(m => m.ProjectsComponent) },
-  { path: RouterConstants.ALGORITHMS.PATH, component: RouterConstants.ALGORITHMS.COMPONENT},
+  { path: RouterConstants.ALGORITHMS.PATH, loadComponent: () => import('./pages/algorithms/algorithms.component').then(m => m.AlgorithmsComponent) },
-  { path: RouterConstants.PATHFINDING.PATH, component: RouterConstants.PATHFINDING.COMPONENT},
+  { path: RouterConstants.PATHFINDING.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/pathfinding.component').then(m => m.PathfindingComponent) },
-  { path: RouterConstants.SORTING.PATH, component: RouterConstants.SORTING.COMPONENT},
+  { path: RouterConstants.SORTING.PATH, loadComponent: () => import('./pages/algorithms/sorting/sorting.component').then(m => m.SortingComponent) },
-  { path: RouterConstants.IMPRINT.PATH, component: RouterConstants.IMPRINT.COMPONENT},
+  { path: RouterConstants.IMPRINT.PATH, loadComponent: () => import('./pages/imprint/imprint.component').then(m => m.ImprintComponent) },
-  { path: RouterConstants.GOL.PATH, component: RouterConstants.GOL.COMPONENT},
+  { path: RouterConstants.GOL.PATH, loadComponent: () => import('./pages/algorithms/conway-gol/conway-gol.component').then(m => m.ConwayGolComponent) },
-  { path: RouterConstants.LABYRINTH.PATH, component: RouterConstants.LABYRINTH.COMPONENT},
+  { path: RouterConstants.LABYRINTH.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/labyrinth/labyrinth.component').then(m => m.LabyrinthComponent) },
-  { path: RouterConstants.FRACTAL.PATH, component: RouterConstants.FRACTAL.COMPONENT},
+  { path: RouterConstants.FRACTAL.PATH, loadComponent: () => import('./pages/algorithms/fractal/fractal.component').then(m => m.FractalComponent) },
-  { path: RouterConstants.FRACTAL3d.PATH, component: RouterConstants.FRACTAL3d.COMPONENT},
+  { path: RouterConstants.FRACTAL3d.PATH, loadComponent: () => import('./pages/algorithms/fractal3d/fractal3d.component').then(m => m.Fractal3dComponent) },
-  { path: RouterConstants.PENDULUM.PATH, component: RouterConstants.PENDULUM.COMPONENT},
+  { path: RouterConstants.PENDULUM.PATH, loadComponent: () => import('./pages/algorithms/pendulum/pendulum.component').then(m => m.default) },
-  { path: RouterConstants.CLOTH.PATH, component: RouterConstants.CLOTH.COMPONENT}
+  { 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';
+export class RouterConstants {
-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 {
 
   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'],
+  styleUrl: './algorithms.component.scss',
-  standalone: true,
+  imports: [RouterLink, MatCardModule, TranslatePipe],
-  imports: [CommonModule, RouterLink, MatCardModule, TranslatePipe],
 })
-export class AlgorithmsComponent implements OnInit {
+export class AlgorithmsComponent {
   private readonly algorithmsService = inject(AlgorithmsService);
 
-  categories$: Observable<AlgorithmCategory[]> | undefined;
+  readonly categories: AlgorithmCategory[] = this.algorithmsService.getCategories();
-
-  ngOnInit(): void {
-    this.categories$ = 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[]> {
+  getCategories(): AlgorithmCategory[] {
-    return of(this.categories);
+    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'],
+  styleUrl: './project-dialog.component.scss',
-  standalone: true,
   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']);
+    // translate service lang and fallback are already configured via provideTranslateService in app.config
-    this.translate.setFallbackLang('en');
+    // just ensure the stored preference is active on startup
-    this.lang.set(this.getInitial());
+    this.translate.use(this.lang());
-    this.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();