feat: upgrade to Angular 19

package.json

@@ -12,36 +12,36 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^18.2.0",
-        "@angular/cdk": "^18.2.0",
-        "@angular/common": "^18.2.0",
-        "@angular/compiler": "^18.2.0",
-        "@angular/core": "^18.2.0",
-        "@angular/forms": "^18.2.0",
-        "@angular/material": "^18.2.0",
-        "@angular/platform-browser": "^18.2.0",
-        "@angular/platform-browser-dynamic": "^18.2.0",
-        "@angular/router": "^18.2.0",
-        "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
-        "zone.js": "~0.14.10"
+        "@angular/animations": "^19.1.3",
+        "@angular/cdk": "^19.1.1",
+        "@angular/common": "^19.1.3",
+        "@angular/compiler": "^19.1.3",
+        "@angular/core": "^19.1.3",
+        "@angular/forms": "^19.1.3",
+        "@angular/material": "^19.1.1",
+        "@angular/platform-browser": "^19.1.3",
+        "@angular/platform-browser-dynamic": "^19.1.3",
+        "@angular/router": "^19.1.3",
+        "rxjs": "~7.8.1",
+        "tslib": "^2.8.1",
+        "zone.js": "~0.15.0"
     },
     "devDependencies": {
-        "@angular-builders/custom-webpack": "^18.0.0",
-        "@angular-devkit/build-angular": "^18.2.7",
-        "@angular/cli": "^18.2.7",
-        "@angular/compiler-cli": "^18.2.0",
-        "@types/jasmine": "~5.1.0",
-        "angular-eslint": "18.3.1",
+        "@angular-builders/custom-webpack": "^19.0.0",
+        "@angular-devkit/build-angular": "^19.1.4",
+        "@angular/cli": "^19.1.4",
+        "@angular/compiler-cli": "^19.1.3",
+        "@types/jasmine": "~5.1.5",
+        "angular-eslint": "19.0.2",
         "dotenv-webpack": "^8.1.0",
-        "eslint": "^9.9.1",
-        "jasmine-core": "~5.2.0",
-        "karma": "~6.4.0",
+        "eslint": "^9.19.0",
+        "jasmine-core": "~5.5.0",
+        "karma": "~6.4.4",
         "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.0",
+        "karma-coverage": "~2.2.1",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-        "typescript": "~5.5.2",
-        "typescript-eslint": "8.2.0"
+        "typescript": "~5.7.3",
+        "typescript-eslint": "8.21.0"
     }
 }

src/app/app.component.spec.ts

@@ -1,16 +1,18 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { TestingModule } from './testing.module';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { AppModule } from './app.module';
+import { AuthService } from './services/auth.service';
+import { ActivatedRoute } from '@angular/router';
 
 describe('AppComponent', () => {
-    beforeEach(() =>
-        TestBed.configureTestingModule({
-            imports: [TestingModule, MatToolbarModule, AppModule],
-            declarations: [AppComponent],
-        }),
-    );
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [AppComponent],
+            providers: [
+                { provide: ActivatedRoute, useValue: {} },
+                { provide: AuthService, useValue: {} },
+            ],
+        }).compileComponents();
+    });
 
     it('should create the app', () => {
         const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -1,11 +1,31 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { AuthService } from './services/auth.service';
+import { CommonModule } from '@angular/common';
+import { RouterModule, RouterOutlet } from '@angular/router';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { Subscription } from 'rxjs';
+import { AuthenticationComponent } from './components/authentication/authentication.component';
+import { AuthService } from './services/auth.service';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
+    imports: [
+        CommonModule,
+        RouterModule,
+        RouterOutlet,
+        MatToolbarModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatIconButton,
+        AuthenticationComponent,
+    ],
 })
 export class AppComponent implements OnInit, OnDestroy {
     isLoggedIn = false;

src/app/app.config.ts

@@ -0,0 +1,15 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideRouter(routes),
+        provideHttpClient(),
+        provideAnimations(),
+    ],
+};

src/app/app-routing.module.ts → src/app/app.routes.ts

@@ -1,18 +1,11 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { QueryComponent } from './components/query/query.component';
 import { CatalogBrowserComponent } from './components/catalog-browser/catalog-browser.component';
 import { NodeDetailsComponent } from './components/node-details/node-details.component';
 
-const routes: Routes = [
+export const routes: Routes = [
     { path: 'nodes', component: CatalogBrowserComponent },
     { path: 'query', component: QueryComponent },
     { path: 'nodes/:id', component: NodeDetailsComponent },
     { path: '', redirectTo: 'nodes', pathMatch: 'full' },
 ];
-
-@NgModule({
-    imports: [RouterModule.forRoot(routes)],
-    exports: [RouterModule],
-})
-export class AppRoutingModule {}

src/app/components/authentication/authentication.component.spec.ts

@@ -1,21 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { of } from 'rxjs';
 import { AuthenticationComponent } from './authentication.component';
-import { TestingModule } from '../../testing.module';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AuthService } from '../../services/auth.service';
 
 describe('AuthenticationComponent', () => {
     let component: AuthenticationComponent;
     let fixture: ComponentFixture<AuthenticationComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [TestingModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule],
-            declarations: [AuthenticationComponent],
-            schemas: [NO_ERRORS_SCHEMA],
+            imports: [AuthenticationComponent],
+
+            providers: [{ provide: AuthService, useValue: { isLoggedIn$: of(true) } }],
         }).compileComponents();
 
         fixture = TestBed.createComponent(AuthenticationComponent);

src/app/components/authentication/authentication.component.ts

@@ -1,12 +1,17 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { AuthService } from 'src/app/services/auth.service';
 import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-authentication',
     templateUrl: './authentication.component.html',
     styleUrls: ['./authentication.component.scss'],
+    imports: [CommonModule, FormsModule, MatInputModule, MatButtonModule, MatSnackBarModule],
 })
 export class AuthenticationComponent implements OnInit, OnDestroy {
     username = '';

src/app/components/catalog-browser/catalog-browser.component.spec.ts

@@ -1,17 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { CatalogBrowserComponent } from './catalog-browser.component';
-import { TestingModule } from '../../testing.module';
-import { MatCardModule } from '@angular/material/card';
+import { QueryService } from '../../services/query.service';
 
 describe('CatalogBrowserComponent', () => {
     let component: CatalogBrowserComponent;
     let fixture: ComponentFixture<CatalogBrowserComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [TestingModule, MatCardModule],
-            declarations: [CatalogBrowserComponent],
+            imports: [CatalogBrowserComponent],
+            providers: [{ provide: QueryService, useValue: {} }],
         });
         fixture = TestBed.createComponent(CatalogBrowserComponent);
         component = fixture.componentInstance;

src/app/components/catalog-browser/catalog-browser.component.ts

@@ -1,14 +1,29 @@
 import { Component } from '@angular/core';
-import { NodeQueryResult } from '../../types/dtos';
-import { QueryService } from '../../services/query.service';
-
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
 import { map, switchMap, scan, startWith, concatMap } from 'rxjs/operators';
+import { NodeQueryResult } from '../../types/dtos';
+import { QueryService } from '../../services/query.service';
+import { NodeTableComponent } from '../node-table/node-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'app-catalog-browser',
     templateUrl: './catalog-browser.component.html',
     styleUrls: ['./catalog-browser.component.scss'],
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatCardModule,
+        MatTabsModule,
+        MatButtonModule,
+        MatIconModule,
+        NodeTableComponent,
+    ],
 })
 export class CatalogBrowserComponent {
     public readonly data$: Observable<{ totalCount: number; nodes: NodeQueryResult[] }>;

src/app/components/node-details/node-details.component.spec.ts

@@ -1,25 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NodeDetailsComponent } from './node-details.component';
-import { TestingModule } from '../../testing.module';
 import { ActivatedRoute } from '@angular/router';
 import { of } from 'rxjs';
+import { NodeDetailsComponent } from './node-details.component';
+import { QueryService } from '../../services/query.service';
 
 describe('NodeDetailsComponent', () => {
     let component: NodeDetailsComponent;
     let fixture: ComponentFixture<NodeDetailsComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [TestingModule],
-            declarations: [NodeDetailsComponent],
+            imports: [NodeDetailsComponent],
             providers: [
                 {
                     provide: ActivatedRoute,
                     useValue: {
                         params: of({ id: 123 }),
                     },
                 },
+                { provide: QueryService, useValue: {} },
             ],
         });
         fixture = TestBed.createComponent(NodeDetailsComponent);

src/app/components/node-details/node-details.component.ts

@@ -1,13 +1,19 @@
 import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import { map, Observable, switchMap } from 'rxjs';
 import { QueryService } from '../../services/query.service';
 import { NodeQueryResult, QueryResponse } from '../../types/dtos';
-import { ActivatedRoute } from '@angular/router';
-import { map, Observable, switchMap } from 'rxjs';
+import { NodeTableComponent } from '../node-table/node-table.component';
+import { NodeLabelsComponent } from '../node-labels/node-labels.component';
 
 @Component({
     selector: 'app-node-details',
     templateUrl: './node-details.component.html',
     styleUrls: ['./node-details.component.scss'],
+    imports: [CommonModule, RouterModule, MatCardModule, MatListModule, NodeLabelsComponent, NodeTableComponent],
 })
 export class NodeDetailsComponent implements OnInit {
     value?: Observable<NodeQueryResult>;

src/app/components/node-labels/node-labels.component.spec.ts

@@ -1,17 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NodeLabelsComponent } from './node-labels.component';
-import { TestingModule } from '../../testing.module';
-import { MatChipsModule } from '@angular/material/chips';
 
 describe('NodeLabelsComponent', () => {
     let component: NodeLabelsComponent;
     let fixture: ComponentFixture<NodeLabelsComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [TestingModule, MatChipsModule],
-            declarations: [NodeLabelsComponent],
+            imports: [NodeLabelsComponent],
         });
         fixture = TestBed.createComponent(NodeLabelsComponent);
         component = fixture.componentInstance;