Angular v19 upgrades and more

app/angular.json

@@ -64,7 +64,7 @@
               "routesFile": "prerendered-routes.txt"
             },
             "ssr": {
-              "entry": "server.ts"
+              "entry": "src/server.ts"
             }
           },
           "configurations": {
@@ -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,54 +19,55 @@
   },
   "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.3.3",
+    "express": "^4.21.2",
+    "firebase": "^11.2.0",
+    "ngxtension": "^4.2.1",
+    "rxfire": "^6.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.8.1",
-    "zone.js": "~0.14.10"
+    "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.9",
+    "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.17.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",
+    "ng-mocks": "^14.13.2",
     "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.15",
-    "typescript": "~5.5.4",
-    "typescript-eslint": "^8.15.0"
-  }
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.21.0"
+  },
+  "packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

app/src/app/app.component.ts

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

app/src/app/app.config.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/login/feature/login-flow.component.ts

@@ -8,7 +8,6 @@ import { LoginFlowStore } from './login-flow.store';
 
 @Component({
   selector: 'app-login-flow',
-  standalone: true,
   imports: [RouterLink, MatButtonModule, MatIconModule, MatSnackBarModule, LoginFormComponent],
   providers: [LoginFlowStore],
   template: `

app/src/app/login/feature/login-flow.store.ts

@@ -1,4 +1,4 @@
-import { effect, inject } from '@angular/core';
+import { effect, inject, untracked } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthStore } from '@app-shared/auth/data/auth.store';
 import { createLogger } from '@app-shared/logger';
@@ -165,14 +165,14 @@ export const LoginFlowStore = signalStore(
       effect(() => logger.log('State:', getState(store)));
 
       // Listen for changes to the user and trigger completion once we have one.
-      effect(
-        () => {
-          if (store.user()) {
+      effect(() => {
+        const user = store.user();
+        if (user) {
+          untracked(() => {
             void store.completeLogin();
-          }
-        },
-        { allowSignalWrites: true },
-      );
+          });
+        }
+      });
     },
   }),
 );

app/src/app/login/feature/login-page.component.ts

@@ -4,7 +4,6 @@ import { LoginFlowComponent } from './login-flow.component';
 
 @Component({
   selector: 'app-login-page',
-  standalone: true,
   template: `
     @defer {
       <section class="flex justify-center py-6">

app/src/app/login/ui/login-form.component.spec.ts

@@ -3,7 +3,6 @@ import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 import { LoginFormComponent } from './login-form.component';
 
 @Component({
-  standalone: true,
   imports: [LoginFormComponent],
   template: `<app-login-form [processing]="processing" />`,
   changeDetection: ChangeDetectionStrategy.OnPush,

app/src/app/login/ui/login-form.component.ts

@@ -8,7 +8,6 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @Component({
   selector: 'app-login-form',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     ReactiveFormsModule,

app/src/app/shared/auth/data/auth.store.ts

@@ -10,10 +10,10 @@ import {
   withComputed,
   withHooks,
   withMethods,
+  withProps,
   withState,
 } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
-import { createInjectionToken } from 'ngxtension/create-injection-token';
 import { EMPTY, filter, finalize, pipe, shareReplay, switchMap, tap } from 'rxjs';
 import { AuthService } from './auth.service';
 
@@ -117,6 +117,14 @@ export const AuthStore = signalStore(
       ),
     };
   }),
+  withProps((store) => ({
+    waitUntilConnected$: toObservable(store.status).pipe(
+      tap((status) => logger.log('waitUntilConnected$ - status =', status)),
+      filter((status) => status === 'connected'),
+      shareReplay(1),
+    ),
+    user$: toObservable(store.user),
+  })),
   withHooks({
     onInit(store) {
       effect(() => logger.log('State:', getState(store)));
@@ -125,19 +133,3 @@ export const AuthStore = signalStore(
     },
   }),
 );
-
-function helpersFactory(store: AuthStore) {
-  const waitUntilConnected$ = toObservable(store.status).pipe(
-    tap((status) => logger.log('waitUntilConnected$ - status =', status)),
-    filter((status) => status === 'connected'),
-    shareReplay(1),
-  );
-
-  const user$ = toObservable(store.user);
-
-  return {
-    waitUntilConnected$,
-    user$,
-  };
-}
-export const [injectAuthStoreHelpers] = createInjectionToken(helpersFactory, { deps: [AuthStore] });

app/src/app/shared/auth/util/auth.guard.ts

@@ -3,7 +3,7 @@ import { CanMatchFn, Route, Router } from '@angular/router';
 import { createLogger } from '@app-shared/logger';
 import { RuntimeService } from '@app-shared/runtime.service';
 import { map, take } from 'rxjs';
-import { AuthStore, injectAuthStoreHelpers } from '../data/auth.store';
+import { AuthStore } from '../data/auth.store';
 
 const logger = createLogger('authGuard');
 
@@ -23,10 +23,9 @@ export function authGuard(allowOnly: 'authed' | 'not-authed'): CanMatchFn {
       return false;
     }
 
-    const { waitUntilConnected$ } = injectAuthStoreHelpers();
     const authStore = inject(AuthStore);
 
-    return waitUntilConnected$.pipe(
+    return authStore.waitUntilConnected$.pipe(
       map(() => {
         const isAuthenticated = authStore.isAuthenticated();
 

app/src/app/website/feature/about-page.component.ts

@@ -2,9 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-about-page',
-  standalone: true,
   imports: [],
-  template: ` <h1 class="mat-headline-medium text-center">About</h1> `,
+  template: ` <h1 class="text-center">About</h1> `,
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

app/src/app/website/feature/home-page.component.ts

@@ -2,10 +2,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  standalone: true,
   imports: [],
   template: `
-    <h1 class="mat-headline-medium mt-8 text-center">
+    <h1 class="mt-8 text-center">
       This is the
       <a class="underline decoration-dotted" href="https://fullstacks.dev">FullStacksDev</a>
       Angular and Firebase template running on Firebase

app/src/app/website/ui/auth-status.component.ts

@@ -6,7 +6,6 @@ import { LogoutService } from '@app-shared/auth/data/logout.service';
 
 @Component({
   selector: 'app-auth-status',
-  standalone: true,
   imports: [RouterLink, MatButtonModule],
   template: `
     @if (isAuthenticated()) {

app/src/app/website/website-shell.component.ts

@@ -5,7 +5,6 @@ import { AuthStatusComponent } from './ui/auth-status.component';
 
 @Component({
   selector: 'app-shell',
-  standalone: true,
   imports: [RouterOutlet, RouterLinkWithHref, MatButtonModule, AuthStatusComponent],
   template: `
     <div class="container mx-auto px-4">

app/src/index.html

@@ -15,7 +15,7 @@
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />
   </head>
-  <body id="app" class="mat-typography mat-app-background antialiased">
+  <body id="app" class="mat-typography antialiased">
     <app-root></app-root>
     <noscript class="p-8 text-center text-lg">
       Please enable JavaScript to continue using this application