Adopts standalone components in frontend and improves maintainability

Author: diego-guerrero

frontend/package-lock.json

@@ -10,14 +10,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.4",
-    "@angular/common": "^19.0.4",
-    "@angular/compiler": "^19.0.4",
-    "@angular/core": "^19.0.4",
-    "@angular/forms": "^19.0.4",
-    "@angular/platform-browser": "^19.0.4",
-    "@angular/platform-browser-dynamic": "^19.0.4",
-    "@angular/router": "^19.0.4",
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@ng-select/ng-select": "~14.1.0",
     "@types/bootstrap": "^5.2.7",
@@ -32,9 +32,9 @@
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.5",
-    "@angular/cli": "~19.0.5",
-    "@angular/compiler-cli": "^19.0.4",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/cli": "~19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.1",
     "karma": "~6.4.2",

frontend/package.json

@@ -1,11 +1,16 @@
-<header *ngIf="this.showHeader">
-    <app-layout-header></app-layout-header>
-</header>
+@if (this.showHeader) {
+    <header>
+        <app-layout-header></app-layout-header>
+    </header>
+}
 <main class="container-fluid">
     <div class="row">
-        <aside class="col-3 p-1" *ngIf="this.showAside">
-            <app-layout-aside></app-layout-aside>
-        </aside>
+        @if (this.showAside) {
+            <aside class="col-3 p-1">
+                <app-layout-aside></app-layout-aside>
+            </aside>
+        }
+
         <section [ngClass]='{"col-9": this.showAside, "col-12": !this.showAside}'>
             <app-not-supported-file-system-access-api></app-not-supported-file-system-access-api>
             <router-outlet></router-outlet>

frontend/src/app/app.component.html

@@ -1,16 +1,10 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [
-                RouterTestingModule
-            ],
-            declarations: [
-                AppComponent
-            ],
+            imports: [AppComponent]
         }).compileComponents();
     });
 

frontend/src/app/app.component.spec.ts

@@ -1,12 +1,23 @@
+import { CommonModule } from "@angular/common";
 import { Component } from '@angular/core';
-import { ActivatedRoute, Data, Event, NavigationEnd, ResolveEnd, Router } from "@angular/router";
+import { Data, Event, NavigationEnd, ResolveEnd, Router, RouterOutlet } from "@angular/router";
 import { Observable } from 'rxjs';
+import { NotSupportedFileSystemAccessApiComponent } from "./components/helpers/not-supported-file-system-access-api/not-supported-file-system-access-api.component";
+import { AsideComponent } from "./components/layout/aside/aside.component";
+import { HeaderComponent } from "./components/layout/header/header.component";
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    standalone: false
+    imports: [
+        AsideComponent,
+        HeaderComponent,
+        NotSupportedFileSystemAccessApiComponent,
+
+        CommonModule,
+        RouterOutlet
+    ],
+    styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
     title = 'VSCode4Teaching';
@@ -17,7 +28,7 @@ export class AppComponent {
     nextShowAside: boolean | undefined = undefined;
     nextShowHeader: boolean | undefined = undefined;
 
-    constructor(private router: Router, private activatedRoute: ActivatedRoute) {
+    constructor(private router: Router) {
         (<Observable<Event>>this.router.events).subscribe((routerEvent: Event) => {
             if (routerEvent instanceof ResolveEnd) {
                 const deepestChild = ((e) => {

frontend/src/app/app.component.ts

@@ -0,0 +1,26 @@
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { ApplicationConfig } from "@angular/core";
+import { provideRouter, RouterModule } from "@angular/router";
+import { AuthPersistenceMethodInterface } from "@app-services/auth/persistence-methods/auth-persistence-method-interface.service";
+import { AuthSessionstorage } from "@app-services/auth/persistence-methods/auth-sessionstorage.class";
+import { HttpRequestInterceptor } from "@app-services/rest-api/interceptor/http-request.interceptor";
+import { UrlService } from "@app-services/url/url.service";
+import { WebSocketHandler } from "@app-services/ws/web-socket-handler";
+import { WebSocketHandlerFactory } from "@app-services/ws/web-socket-handler-factory.service";
+import { routes } from "./app.routes";
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideRouter(routes),
+        { provide: RouterModule, useValue: RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' }) },
+
+        provideHttpClient(withInterceptorsFromDi()),
+
+        { provide: AuthPersistenceMethodInterface, useClass: AuthSessionstorage },
+
+        { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
+        { provide: Window, useValue: window },
+
+        { provide: WebSocketHandler, useFactory: WebSocketHandlerFactory, deps: [UrlService, AuthPersistenceMethodInterface] },
+    ]
+}

frontend/src/app/app.config.ts

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { DashboardComponent } from "./components/private/common/dashboard/dashboard.component";
 import { StudentCourseComponent } from "./components/private/student/course/student-course.component";
 import { TeacherCourseComponent } from "./components/private/teacher/course/teacher-course.component";
@@ -8,7 +7,7 @@ import { IndexComponent } from "./components/public/index/index.component";
 import { LoginComponent } from "./components/public/login/login.component";
 import { isLoggedIn, isTeacher } from "./services/auth/guards/guards.service";
 
-const routes: Routes = [
+export const routes: Routes = [
     // private/common
     { path: "dashboard", component: DashboardComponent, data: { showAside: false }, canActivate: [isLoggedIn] },
 
@@ -33,12 +32,3 @@ const routes: Routes = [
     { path: "login", component: LoginComponent, data: { showAside: false, showHeader: false } },
     { path: "", component: IndexComponent, data: { showAside: false } }
 ];
-
-@NgModule({
-    imports: [RouterModule.forRoot(routes, {
-        onSameUrlNavigation: 'reload'
-    })],
-    exports: [RouterModule]
-})
-export class AppRoutingModule {
-}

frontend/src/app/app.module.ts

@@ -2,8 +2,7 @@ import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@
 
 @Component({
     selector: 'app-helper-delay-since',
-    templateUrl: './delay-since.component.html',
-    standalone: false
+    templateUrl: './delay-since.component.html'
 })
 export class DelaySinceComponent implements OnInit, OnChanges, OnDestroy {
     @Input("since") since!: Date;
@@ -31,7 +30,7 @@ export class DelaySinceComponent implements OnInit, OnChanges, OnDestroy {
     ngOnDestroy() {
         // Clear the interval when the component is destroyed
         if (this.elapsedTimeIntervalId) {
-            clearInterval(this.elapsedTimeIntervalId);
+            window.clearInterval(this.elapsedTimeIntervalId);
         }
     }
 
@@ -69,9 +68,9 @@ export class DelaySinceComponent implements OnInit, OnChanges, OnDestroy {
         this.readableElapsedTime = `${Math.floor(elapsedTime)} ${unit}`;
 
         if (this.elapsedTimeIntervalId !== undefined) {
-            clearInterval(this.elapsedTimeIntervalId);
+            window.clearInterval(this.elapsedTimeIntervalId);
         }
-        this.elapsedTimeIntervalId = setInterval(() => {
+        this.elapsedTimeIntervalId = window.setInterval(() => {
             this.getInterpretedElapsedTime();
         }, nextDelay);
     }

frontend/src/app/app-routing.module.ts renamed to frontend/src/app/app.routes.ts

@@ -1,10 +1,12 @@
-<div class="container justify-content-center" *ngIf="this.showFsaAPINotSupportedMessage">
-    <div class="row">
-        <div class="col mt-1 mb-3">
-            <div class="alert alert-v4t text-center">
-                <i class="fa fa-exclamation-circle"></i>&nbsp;<strong>Attention!</strong> This web browser does not support interaction with your computer files and folders, so you will not be able to use features like exercise download or automatic file synchronization.
-                <br>If you want to use these features, please use a compatible browser like most recent versions of Google Chrome or Microsoft Edge. Check out compatibility in <a href="https://caniuse.com/native-filesystem-api" target="_blank" class="link-v4t link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">this link</a>.
+@if (this.showFsaAPINotSupportedMessage) {
+    <div class="container justify-content-center">
+        <div class="row">
+            <div class="col mt-1 mb-3">
+                <div class="alert alert-v4t text-center">
+                    <i class="fa fa-exclamation-circle"></i>&nbsp;<strong>Attention!</strong> This web browser does not support interaction with your computer files and folders, so you will not be able to use features like exercise download or automatic file synchronization.
+                    <br>If you want to use these features, please use a compatible browser like most recent versions of Google Chrome or Microsoft Edge. Check out compatibility in <a href="https://caniuse.com/native-filesystem-api" target="_blank" class="link-v4t link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">this link</a>.
+                </div>
             </div>
         </div>
     </div>
-</div>
+}

frontend/src/app/components/helpers/delay-since/delay-since.component.ts

@@ -1,14 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Event, NavigationStart, Router } from "@angular/router";
+import { CurrentUserService } from "@app-services/auth/current-user/current-user.service";
 import { supported as fileSystemAccessApiSupported } from "browser-fs-access";
 import { Subscription } from "rxjs";
-import { CurrentUserService } from "../../../services/auth/current-user/current-user.service";
 
 @Component({
     selector: 'app-not-supported-file-system-access-api',
-    templateUrl: './not-supported-file-system-access-api.component.html',
-    styleUrls: ['./not-supported-file-system-access-api.component.scss'],
-    standalone: false
+    templateUrl: './not-supported-file-system-access-api.component.html'
 })
 export class NotSupportedFileSystemAccessApiComponent implements OnInit, OnDestroy {
     public showFsaAPINotSupportedMessage: boolean;

frontend/src/app/components/helpers/not-supported-file-system-access-api/not-supported-file-system-access-api.component.html

@@ -1,3 +1,5 @@
-<div *ngIf="info.visible" class="progress" role="progressbar" aria-label="Basic example" [attr.aria-valuenow]="info.percentage" aria-valuemin="0" aria-valuemax="100" style="width: 100%; background-color: rgba(244, 74, 62, .2)">
-    <div [ngClass]="{ 'progress-bar-striped': info.percentage < 100 }" class="progress-bar progress-bar-animated overflow-visible" [ngStyle]="{ 'width': info.percentage + '%', 'background-color': '#F44A3E', 'color': '#333333' }">{{ info.process }} ({{ Math.round(info.percentage) }}%)</div>
-</div>
+@if (info.visible) {
+    <div class="progress" role="progressbar" aria-label="Basic example" [attr.aria-valuenow]="info.percentage" aria-valuemin="0" aria-valuemax="100" style="width: 100%; background-color: rgba(244, 74, 62, .2)">
+        <div [ngClass]="{ 'progress-bar-striped': info.percentage < 100 }" class="progress-bar progress-bar-animated overflow-visible" [ngStyle]="{ 'width': info.percentage + '%', 'background-color': '#F44A3E', 'color': '#333333' }">{{ info.process }} ({{ Math.round(info.percentage) }}%)</div>
+    </div>
+}

frontend/src/app/components/helpers/not-supported-file-system-access-api/not-supported-file-system-access-api.component.scss

@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import { Component, Input } from '@angular/core';
 
 export interface ProgressBarDTO {
@@ -8,9 +9,10 @@ export interface ProgressBarDTO {
 
 @Component({
     selector: 'app-helper-progress-bar',
-    templateUrl: './progress-bar.component.html',
-    styleUrls: ['./progress-bar.component.scss'],
-    standalone: false
+    imports: [
+        CommonModule
+    ],
+    templateUrl: './progress-bar.component.html'
 })
 export class ProgressBarComponent {
     @Input("info") public info!: ProgressBarDTO;