Angular v19 upgrades and more

Author: jits

app/angular.json

@@ -119,6 +119,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
+            "builderMode": "application",
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",

app/ngsw-config.json

@@ -1,6 +1,7 @@
 {
   "$schema": "./node_modules/@angular/service-worker/config/schema.json",
   "index": "/index.csr.html",
+  "applicationMaxAge": "30d",
   "assetGroups": [
     {
       "name": "app",

app/package.json

@@ -19,55 +19,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.12",
-    "@angular/cdk": "18.2.13",
-    "@angular/common": "^18.2.12",
-    "@angular/compiler": "^18.2.12",
-    "@angular/core": "^18.2.12",
-    "@angular/forms": "^18.2.12",
-    "@angular/material": "18.2.13",
-    "@angular/platform-browser": "^18.2.12",
-    "@angular/platform-browser-dynamic": "^18.2.12",
-    "@angular/platform-server": "^18.2.12",
-    "@angular/router": "^18.2.12",
-    "@angular/service-worker": "^18.2.12",
-    "@angular/ssr": "^18.2.12",
-    "@ngrx/operators": "^18.1.1",
-    "@ngrx/signals": "^18.1.1",
-    "consola": "^3.2.3",
-    "express": "^4.21.1",
-    "firebase": "^11.0.2",
-    "ngxtension": "^4.1.0",
-    "rxfire": "^6.0.6-canary.5cfad21",
+    "@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/platform-server": "^19.1.3",
+    "@angular/router": "^19.1.3",
+    "@angular/service-worker": "^19.1.3",
+    "@angular/ssr": "^19.1.4",
+    "@ngrx/operators": "^19.0.0",
+    "@ngrx/signals": "^19.0.0",
+    "consola": "^3.4.0",
+    "express": "^4.21.2",
+    "firebase": "^11.2.0",
+    "ngxtension": "^4.2.1",
+    "rxfire": "^6.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.8.1",
-    "type-fest": "^4.27.0",
-    "zone.js": "~0.14.10"
+    "type-fest": "^4.33.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.12",
-    "@angular/cli": "^18.2.12",
-    "@angular/compiler-cli": "^18.2.12",
-    "@ngrx/eslint-plugin": "^18.1.1",
-    "@types/express": "^4.17.17",
-    "@types/jasmine": "~5.1.0",
-    "@types/node": "^22.9.0",
-    "angular-eslint": "^18.4.1",
+    "@angular-devkit/build-angular": "^19.1.4",
+    "@angular/cli": "^19.1.4",
+    "@angular/compiler-cli": "^19.1.3",
+    "@ngrx/eslint-plugin": "^19.0.0",
+    "@types/express": "^5.0.0",
+    "@types/jasmine": "~5.1.5",
+    "@types/node": "^22.10.10",
+    "angular-eslint": "^19.0.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "jasmine-core": "~5.4.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "jasmine-core": "~5.5.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-mocks": "^14.13.1",
-    "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "ng-mocks": "^14.13.2",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.15",
-    "typescript": "~5.5.4",
-    "typescript-eslint": "^8.15.0"
-  }
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.21.0"
+  },
+  "packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

app/pnpm-lock.yaml

@@ -10,7 +10,6 @@ const logger = createLogger('AppComponent');
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [RouterOutlet, MatSnackBarModule],
   template: ` <router-outlet /> `,
   styles: [],

app/server.ts

@@ -1,6 +1,6 @@
 import { ApplicationConfig, isDevMode, provideZoneChangeDetection } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter, withComponentInputBinding, withRouterConfig } from '@angular/router';
 import { provideServiceWorker } from '@angular/service-worker';
@@ -14,7 +14,7 @@ export const appConfig: ApplicationConfig = {
       withComponentInputBinding(),
       withRouterConfig({ paramsInheritanceStrategy: 'always' }),
     ),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
     provideAnimationsAsync(),
     provideServiceWorker('ngsw-worker.js', {
       enabled: !isDevMode(),

app/src/app/app.component.ts

@@ -7,7 +7,6 @@ import { EntriesUpdateStore } from '../data/entries-update.store';
 import { EntryItemComponent } from './entry-item.component';
 
 @Component({
-  standalone: true,
   imports: [EntryItemComponent],
   template: `<app-entry-item [entry]="entry" />`,
   changeDetection: ChangeDetectionStrategy.OnPush,

app/src/app/app.config.ts

@@ -9,7 +9,6 @@ import { EntryFormComponent } from '../ui/entry-form.component';
 
 @Component({
   selector: 'app-entry-item',
-  standalone: true,
   imports: [DatePipe, MatCardModule, MatButtonModule, EntryFormComponent],
   template: `
     <mat-card>

app/src/app/logbook/feature/entry-item.component.spec.ts

@@ -25,7 +25,6 @@ const logger = createLogger('LogbookPageComponent');
 
 @Component({
   selector: 'app-logbook-page',
-  standalone: true,
   imports: [
     MatProgressBarModule,
     MatFormFieldModule,
@@ -42,7 +41,7 @@ const logger = createLogger('LogbookPageComponent');
       @if (processing()) {
         <mat-progress-bar mode="indeterminate" />
       }
-      <h1 class="mat-headline-medium mt-4 py-2 text-center">My logbook</h1>
+      <h1 class="mt-4 py-2 text-center">My logbook</h1>
       <main class="flex h-full flex-col items-center px-4 py-0">
         @if (status() === 'error') {
           <div class="flex items-center justify-center px-3 py-8">
@@ -57,7 +56,7 @@ const logger = createLogger('LogbookPageComponent');
 
             @if (!onboarding()) {
               <section class="py-6">
-                <h2 class="mat-title-large my-4 text-center">Entries</h2>
+                <h2 class="my-4 text-center">Entries</h2>
 
                 <div class="mb-3 mt-5 flex w-full flex-col items-center space-y-4">
                   <mat-form-field class="w-fit">
@@ -121,6 +120,7 @@ export class LogbookPageComponent {
   readonly #entriesStore = inject(EntriesStore);
   readonly #entriesUpdateStore = inject(EntriesUpdateStore);
 
+  // eslint-disable-next-line @angular-eslint/no-input-rename
   readonly selectedCategory = input<string | undefined>(undefined, { alias: 'category' });
 
   readonly processing = this.#entriesUpdateStore.processing;