zoneless + fix signal form refresh

packages/frontend/src/app/app.config.ts

@@ -4,7 +4,8 @@ import {
     LOCALE_ID,
     provideAppInitializer,
     provideBrowserGlobalErrorListeners,
-    provideZoneChangeDetection,
+    provideCheckNoChangesConfig,
+    provideZonelessChangeDetection,
 } from '@angular/core';
 import {
     PreloadAllModules,
@@ -48,7 +49,7 @@ export const appConfig: ApplicationConfig = {
             withComponentInputBinding(),
         ),
         provideBrowserGlobalErrorListeners(),
-        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideZonelessChangeDetection(),
         provideKeycloak({
             config: keycloakConfig,
             initOptions: {
@@ -90,3 +91,9 @@ export const appConfig: ApplicationConfig = {
         }),
     ],
 };
+
+if (isDevMode()) {
+    appConfig.providers.push(
+        provideCheckNoChangesConfig({ exhaustive: true, interval: 100 }),
+    );
+}

packages/frontend/src/app/app.ts

@@ -1,4 +1,10 @@
-import { Component, effect, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule, RouterOutlet } from '@angular/router';
 import { Authentication } from './services/authentication';
@@ -9,6 +15,7 @@ import { keycloakConfig } from './util/keycloak-config';
     imports: [RouterOutlet, MatButtonModule, RouterModule],
     templateUrl: './app.html',
     styleUrl: './app.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class App {
     protected readonly title = signal('frontend');

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.html

@@ -1,4 +1,4 @@
-<form>
+<form (submit)="submit(); $event.preventDefault()">
     <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
     <p>Passnummer: {{ member.passnummer }}</p>
     <p>Geburtsdatum: {{ member.geburtsdatum | datePipe }}</p>
@@ -11,7 +11,5 @@
             [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
-    <button mat-raised-button color="primary" (click)="submit()">
-        Speichern
-    </button>
+    <button mat-raised-button color="primary" type="submit">Speichern</button>
 </form>

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.ts

@@ -1,4 +1,9 @@
-import { Component, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    signal,
+} from '@angular/core';
 import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -32,6 +37,7 @@ import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dia
     ],
     templateUrl: './delete-member-dialog.component.html',
     styleUrl: './delete-member-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeleteMemberDialogComponent {
     private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
@@ -46,13 +52,13 @@ export class DeleteMemberDialogComponent {
     protected readonly form = form(this.deletionModel);
     protected readonly member = this.data.member;
 
-    protected async submit() {
+    protected submit() {
         const date = this.deletionModel().kuendigungzum;
-        await api.scheduleDeletion(
+        api.scheduleDeletion(
             this.member.id,
             date ? dateToLocal(date).toISOString() : '',
-        );
-
-        this.dialogRef.close();
+        ).then(() => {
+            this.dialogRef.close();
+        });
     }
 }

packages/frontend/src/app/components/edit-member-dialog/edit-member-dialog.component.html

@@ -1,4 +1,4 @@
-<form>
+<form (submit)="submit(); $event.preventDefault()">
     <mat-form-field>
         <mat-label>Vorname</mat-label>
         <input matInput placeholder="Vorname" [field]="form.vorname" />
@@ -35,7 +35,5 @@
             <mat-option [value]="false">Nein</mat-option>
         </mat-select>
     </mat-form-field>
-    <button mat-raised-button color="primary" (click)="submit()">
-        Speichern
-    </button>
+    <button mat-raised-button color="primary" type="submit">Speichern</button>
 </form>

packages/frontend/src/app/components/edit-member-dialog/edit-member-dialog.component.ts

@@ -1,4 +1,9 @@
-import { Component, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    signal,
+} from '@angular/core';
 import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -26,6 +31,7 @@ import { MemberDtoHelper, MemberEditForm } from '../../util/member.js';
     ],
     templateUrl: './edit-member-dialog.component.html',
     styleUrl: './edit-member-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditMemberDialogComponent {
     private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
@@ -39,11 +45,12 @@ export class EditMemberDialogComponent {
     );
     protected readonly form = form(this.memberModel);
 
-    protected async submit() {
+    protected submit() {
         const member: api.MemberDto = this.memberDtoHelper.memberFromSignal(
             this.memberModel(),
         );
-        await api.updateMember(member);
-        this.dialogRef.close();
+        api.updateMember(member).then(() => {
+            this.dialogRef.close();
+        });
     }
 }

packages/frontend/src/app/components/home/home.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { RouterModule } from '@angular/router';
@@ -15,6 +15,7 @@ import { Claim } from '../../generated-api/api';
     ],
     templateUrl: './home.html',
     styleUrl: './home.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Home {
     protected Claim = Claim;

packages/frontend/src/app/components/login/login.ts

@@ -1,22 +1,23 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { Authentication } from '../../services/authentication';
 
 @Component({
-  selector: 'app-login',
-  imports: [],
-  templateUrl: './login.html',
-  styleUrl: './login.scss',
+    selector: 'app-login',
+    imports: [],
+    templateUrl: './login.html',
+    styleUrl: './login.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Login {
-  private readonly authentication = inject(Authentication);
-  private readonly router = inject(Router);
+    private readonly authentication = inject(Authentication);
+    private readonly router = inject(Router);
 
-  public constructor() {
-    if(this.authentication.loggedIn()){
-      this.router.navigate(['/home']);
-    }else{
-      this.authentication.login();
+    public constructor() {
+        if (this.authentication.loggedIn()) {
+            this.router.navigate(['/home']);
+        } else {
+            this.authentication.login();
+        }
     }
-  }
 }

packages/frontend/src/app/components/missing-page/missing-page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { Authentication } from '../../services/authentication';
@@ -8,6 +8,7 @@ import { Authentication } from '../../services/authentication';
     imports: [MatButtonModule, RouterModule],
     templateUrl: './missing-page.html',
     styleUrl: './missing-page.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MissingPage {
     protected readonly auth = inject(Authentication);

packages/frontend/src/app/components/new-member/new-member.component.html

@@ -1,5 +1,5 @@
 <h1>Neues Mitglied anlegen</h1>
-<form>
+<form (submit)="onSubmit(); $event.preventDefault()">
     <mat-form-field>
         <mat-label>Vorname</mat-label>
         <input matInput [field]="memberForm.vorname" />
@@ -37,7 +37,5 @@
         <mat-label>Kontakt</mat-label>
         <input matInput [field]="memberForm.kontakt" />
     </mat-form-field>
-    <button mat-flat-button color="primary" (click)="onSubmit()">
-        Hinzufügen
-    </button>
+    <button mat-flat-button color="primary" type="submit">Hinzufügen</button>
 </form>

packages/frontend/src/app/components/new-member/new-member.component.ts

@@ -1,4 +1,9 @@
-import { Component, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    signal,
+} from '@angular/core';
 import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -23,6 +28,7 @@ import { MemberCreateForm, MemberDtoHelper } from '../../util/member.js';
     ],
     templateUrl: './new-member.component.html',
     styleUrl: './new-member.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewMemberComponent {
     private readonly memberDtoHelper = inject(MemberDtoHelper);
@@ -35,7 +41,7 @@ export class NewMemberComponent {
     );
     protected readonly memberForm = form(this.memberModel);
 
-    protected async onSubmit(): Promise<void> {
+    protected onSubmit() {
         if (!this.memberForm().valid()) {
             return;
         }
@@ -44,12 +50,13 @@ export class NewMemberComponent {
             this.memberModel(),
         );
 
-        try {
-            await api.createMember(newMember);
-            console.log('Successfully added Member');
-            this.dialogRef.close();
-        } catch (e) {
-            console.error('Error adding member', e);
-        }
+        api.createMember(newMember)
+            .then(() => {
+                console.log('Successfully added Member');
+                this.dialogRef.close();
+            })
+            .catch(e => {
+                console.error('Error adding member', e);
+            });
     }
 }

packages/frontend/src/app/components/test/test.ts

@@ -1,42 +1,52 @@
 import { JsonPipe } from '@angular/common';
-import { Component, effect, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
 import * as api from '../../generated-api/api';
 import { Authentication } from '../../services/authentication';
 
 @Component({
-  selector: 'app-test',
-  imports: [JsonPipe],
-  templateUrl: './test.html',
-  styleUrl: './test.scss',
+    selector: 'app-test',
+    imports: [JsonPipe],
+    templateUrl: './test.html',
+    styleUrl: './test.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Test {
-  protected auth = inject(Authentication);
+    protected auth = inject(Authentication);
 
-  protected apiStatus = signal<string>("Waiting");
-  protected authTest = signal<string>("Waiting");
-  
-  public constructor(){
-    effect(()=>{
-    const loggedIn=this.auth.loggedIn();
-    if(!loggedIn){
-      this.apiStatus.set("N/A - not logged in");
-      this.authTest.set("N/A - not logged in");
-      return;
+    protected apiStatus = signal<string>('Waiting');
+    protected authTest = signal<string>('Waiting');
+
+    public constructor() {
+        effect(() => {
+            const loggedIn = this.auth.loggedIn();
+            if (!loggedIn) {
+                this.apiStatus.set('N/A - not logged in');
+                this.authTest.set('N/A - not logged in');
+                return;
+            }
+
+            this.apiStatus.set('Waiting for API');
+            this.authTest.set('Waiting for API');
+            api.getOk()
+                .then(status => {
+                    this.apiStatus.set('Ok');
+                })
+                .catch(e => {
+                    this.apiStatus.set('Error');
+                });
+            api.getAuth()
+                .then(response => {
+                    this.authTest.set('Ok');
+                })
+                .catch(e => {
+                    this.authTest.set(e);
+                });
+        });
     }
-
-    this.apiStatus.set("Waiting for API");
-      this.authTest.set("Waiting for API");
-    api.getOk().then((status) => {
-      this.apiStatus.set("Ok");
-    }).catch((e) => {
-      this.apiStatus.set("Error");
-    });
-    api.getAuth().then((response) => {
-      this.authTest.set("Ok");
-    }).catch((e) => {
-      this.authTest.set(e);
-    });
-  })
-  }
-  
 }

packages/frontend/src/app/components/view-members/view-members.ts

@@ -1,5 +1,6 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     computed,
@@ -56,10 +57,11 @@ enum MemberStatusFilter {
     ],
     templateUrl: './view-members.html',
     styleUrl: './view-members.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ViewMembers implements AfterViewInit {
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
-    
+
     protected readonly MemberStatusFilter = MemberStatusFilter;
     private readonly filterModel = signal({
         filterString: '',
@@ -73,7 +75,6 @@ export class ViewMembers implements AfterViewInit {
         () => this.filterForm.status().value() === MemberStatusFilter.ALL,
     );
 
-
     protected readonly dataSource = new MatTableDataSource<api.MemberDto>();
     private readonly datePipe = new DatePipePipe();
 
@@ -206,6 +207,6 @@ export class ViewMembers implements AfterViewInit {
     private async updateData(): Promise<void> {
         const members = await api.getMembers();
         this.dataSource.data = members;
-        this.changeDetectorRef.detectChanges();
+        this.changeDetectorRef.markForCheck();
     }
 }