refactor: switch to standalone components

FabianScheidt · FabianScheidt · commit 8ddf9849a462 · 2025-01-31T11:37:43.000+01:00
diff --git a/src/app/app.component.spec.ts b/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);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,12 +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({
-    standalone: false,
     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;
diff --git a/src/app/app.config.ts b/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(),
+    ],
+};
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
diff --git a/src/app/app.routes.ts b/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 {}
diff --git a/src/app/components/authentication/authentication.component.spec.ts b/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);
diff --git a/src/app/components/authentication/authentication.component.ts b/src/app/components/authentication/authentication.component.ts
@@ -1,13 +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({
-    standalone: false,
     selector: 'app-authentication',
     templateUrl: './authentication.component.html',
     styleUrls: ['./authentication.component.scss'],
+    imports: [CommonModule, FormsModule, MatInputModule, MatButtonModule, MatSnackBarModule],
 })
 export class AuthenticationComponent implements OnInit, OnDestroy {
     username = '';
diff --git a/src/app/components/catalog-browser/catalog-browser.component.spec.ts b/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;
diff --git a/src/app/components/catalog-browser/catalog-browser.component.ts b/src/app/components/catalog-browser/catalog-browser.component.ts
@@ -1,15 +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({
-    standalone: false,
     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[] }>;
diff --git a/src/app/components/node-details/node-details.component.spec.ts b/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);
diff --git a/src/app/components/node-details/node-details.component.ts b/src/app/components/node-details/node-details.component.ts
@@ -1,14 +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({
-    standalone: false,
     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>;
diff --git a/src/app/components/node-labels/node-labels.component.spec.ts b/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;
diff --git a/src/app/components/node-labels/node-labels.component.ts b/src/app/components/node-labels/node-labels.component.ts
@@ -1,10 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatChipsModule } from '@angular/material/chips';
 
 @Component({
-    standalone: false,
     selector: 'app-node-labels',
     templateUrl: './node-labels.component.html',
     styleUrls: ['./node-labels.component.scss'],
+    imports: [CommonModule, MatChipsModule],
 })
 export class NodeLabelsComponent {
     @Input() labels: string[] = [];
diff --git a/src/app/components/node-table/node-table.component.spec.ts b/src/app/components/node-table/node-table.component.spec.ts
@@ -1,17 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NodeTableComponent } from './node-table.component';
-import { TestingModule } from '../../testing.module';
-import { MatTableModule } from '@angular/material/table';
 
 describe('NodeTableComponent', () => {
     let component: NodeTableComponent;
     let fixture: ComponentFixture<NodeTableComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [TestingModule, MatTableModule],
-            declarations: [NodeTableComponent],
+            imports: [NodeTableComponent],
         });
         fixture = TestBed.createComponent(NodeTableComponent);
         component = fixture.componentInstance;
diff --git a/src/app/components/node-table/node-table.component.ts b/src/app/components/node-table/node-table.component.ts
@@ -1,11 +1,16 @@
 import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
 import { NodeQueryResult } from '../../types/dtos';
+import { NodeLabelsComponent } from '../node-labels/node-labels.component';
+import { JsonStringifyPipe } from '../../util/json-stringify.pipe';
 
 @Component({
-    standalone: false,
     selector: 'app-node-table',
     templateUrl: './node-table.component.html',
     styleUrls: ['./node-table.component.scss'],
+    imports: [RouterModule, JsonStringifyPipe, MatTableModule, MatButtonModule, NodeLabelsComponent],
 })
 export class NodeTableComponent {
     @Input() nodes: NodeQueryResult[] = [];
diff --git a/src/app/components/query/query.component.spec.ts b/src/app/components/query/query.component.spec.ts
diff --git a/src/app/components/query/query.component.ts b/src/app/components/query/query.component.ts
diff --git a/src/main.ts b/src/main.ts
