From 5c97667ec1e54b2e8c96b337f936044b70b56c51 Mon Sep 17 00:00:00 2001 From: Lobo Date: Sat, 7 Mar 2026 16:12:16 +0100 Subject: [PATCH] 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 | 27 +++++++++---------- src/app/constants/RouterConstants.ts | 27 +------------------ src/app/layout/app/app.component.ts | 1 - src/app/layout/imageDialog/image.component.ts | 1 - src/app/layout/topbar/topbar.component.ts | 1 - src/app/pages/about/about.component.ts | 1 - .../algorithms/algorithms.component.html | 2 +- .../pages/algorithms/algorithms.component.ts | 17 ++++-------- .../pages/algorithms/algorithms.service.ts | 5 ++-- .../pathfinding/pathfinding.component.ts | 6 +++-- .../algorithms/sorting/sorting.component.ts | 3 +-- .../dialog/project-dialog.component.ts | 3 +-- src/app/pages/projects/projects.component.ts | 1 - src/app/service/language.service.ts | 7 +++-- src/app/service/reload.service.ts | 26 ------------------ .../components/generic-grid/generic-grid.ts | 3 +-- 16 files changed, 32 insertions(+), 99 deletions(-) delete mode 100644 src/app/service/reload.service.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 8e69cac..3e4cf6e 100644 --- a/src/app/app.routes.ts +++ b/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) }, ]; diff --git a/src/app/constants/RouterConstants.ts b/src/app/constants/RouterConstants.ts index 1ab61ea..1341558 100644 --- a/src/app/constants/RouterConstants.ts +++ b/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 }; } diff --git a/src/app/layout/app/app.component.ts b/src/app/layout/app/app.component.ts index 28073f5..eeb36e2 100644 --- a/src/app/layout/app/app.component.ts +++ b/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' diff --git a/src/app/layout/imageDialog/image.component.ts b/src/app/layout/imageDialog/image.component.ts index 6b09aff..c35d5d0 100644 --- a/src/app/layout/imageDialog/image.component.ts +++ b/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: `
diff --git a/src/app/layout/topbar/topbar.component.ts b/src/app/layout/topbar/topbar.component.ts index aeecd22..014738d 100644 --- a/src/app/layout/topbar/topbar.component.ts +++ b/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, diff --git a/src/app/pages/about/about.component.ts b/src/app/pages/about/about.component.ts index 62a52f8..aff811f 100644 --- a/src/app/pages/about/about.component.ts +++ b/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, diff --git a/src/app/pages/algorithms/algorithms.component.html b/src/app/pages/algorithms/algorithms.component.html index 0e2ab8a..2e2efcb 100644 --- a/src/app/pages/algorithms/algorithms.component.html +++ b/src/app/pages/algorithms/algorithms.component.html @@ -2,7 +2,7 @@

{{ 'ALGORITHM.TITLE' |translate }}

-@for (category of categories$ | async; track category.id) { +@for (category of categories; track category.id) { {{ category.title | translate }} diff --git a/src/app/pages/algorithms/algorithms.component.ts b/src/app/pages/algorithms/algorithms.component.ts index 722dd97..3dc2ee2 100644 --- a/src/app/pages/algorithms/algorithms.component.ts +++ b/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 | undefined; - - ngOnInit(): void { - this.categories$ = this.algorithmsService.getCategories(); - } + readonly categories: AlgorithmCategory[] = this.algorithmsService.getCategories(); } diff --git a/src/app/pages/algorithms/algorithms.service.ts b/src/app/pages/algorithms/algorithms.service.ts index 0db4f56..83b8cdb 100644 --- a/src/app/pages/algorithms/algorithms.service.ts +++ b/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 { - return of(this.categories); + getCategories(): AlgorithmCategory[] { + return this.categories; } } diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts index 4e224d3..86e21b6 100644 --- a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts +++ b/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; } diff --git a/src/app/pages/algorithms/sorting/sorting.component.ts b/src/app/pages/algorithms/sorting/sorting.component.ts index 440f2d9..f38aec7 100644 --- a/src/app/pages/algorithms/sorting/sorting.component.ts +++ b/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 { diff --git a/src/app/pages/projects/dialog/project-dialog.component.ts b/src/app/pages/projects/dialog/project-dialog.component.ts index dcc95d0..8b80957 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.ts +++ b/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, diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts index 9ccde65..64d1bba 100644 --- a/src/app/pages/projects/projects.component.ts +++ b/src/app/pages/projects/projects.component.ts @@ -34,7 +34,6 @@ export interface Projects { @Component({ selector: 'app-projects', - standalone: true, imports: [ MatCardModule, MatChipsModule, diff --git a/src/app/service/language.service.ts b/src/app/service/language.service.ts index 31c8490..0c5bd25 100644 --- a/src/app/service/language.service.ts +++ b/src/app/service/language.service.ts @@ -10,10 +10,9 @@ export class LanguageService { readonly lang = signal(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) { diff --git a/src/app/service/reload.service.ts b/src/app/service/reload.service.ts deleted file mode 100644 index ff66db5..0000000 --- a/src/app/service/reload.service.ts +++ /dev/null @@ -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())); - } -} diff --git a/src/app/shared/components/generic-grid/generic-grid.ts b/src/app/shared/components/generic-grid/generic-grid.ts index 26791a9..77c3c86 100644 --- a/src/app/shared/components/generic-grid/generic-grid.ts +++ b/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();