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/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,