@tylix/angular 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylix/angular",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Angular frontend for Tylix: auth and API signals, route guards, an HttpClient interceptor, plus the Vite adapter the Tylix CLI loads.",
   "license": "MIT",
   "author": "Mbiyrukzz",
@@ -56,14 +56,14 @@
     "test": "node --test src/*.test.js"
   },
   "dependencies": {
-    "@tylix/client": "^1.0.0"
+    "@tylix/client": "^1.2.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=20.0.0",
-    "@angular/core": ">=20.0.0",
-    "@angular/router": ">=20.0.0",
+    "@angular/common": ">=20.0.0 <23.0.0",
+    "@angular/core": ">=20.0.0 <23.0.0",
+    "@angular/router": ">=20.0.0 <23.0.0",
     "rxjs": "^7.4.0",
-    "@angular/platform-server": ">=20.0.0"
+    "@angular/platform-server": ">=20.0.0 <23.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/platform-server": {

package/src/index.d.ts

@@ -1,4 +1,4 @@
-import type { InjectionToken, Signal } from '@angular/core'
+import type { EnvironmentProviders, InjectionToken, Signal } from '@angular/core'
 import type { CanActivateFn } from '@angular/router'
 import type { HttpInterceptorFn } from '@angular/common/http'
 import type { ApiOptions, ApiResult, Auth, TylixUser } from '@tylix/client'
@@ -73,3 +73,13 @@ export function injectChannel<T = unknown>(
 
 /** False on the server and during hydration, true after the first browser render. Injection context. */
 export function injectHydrated(): Signal<boolean>
+
+/**
+ * Keeps errors that reach Angular's ErrorHandler (a template that throws, a
+ * failed navigation) in a signal, so the app can show an error page. A new
+ * navigation clears it.
+ */
+export function provideAppErrorHandler(options?: { onError?: (error: unknown) => void }): EnvironmentProviders
+
+/** The error caught by provideAppErrorHandler, or null. Injection context. */
+export function injectAppError(): { error: Signal<unknown>; clear(): void }

package/src/index.js

@@ -4,16 +4,19 @@
 // sync) lives in @tylix/client, so every frontend behaves the same.
 import {
   DestroyRef,
+  ErrorHandler,
   InjectionToken,
   PendingTasks,
   afterNextRender,
   computed,
   effect,
   inject,
+  makeEnvironmentProviders,
+  provideEnvironmentInitializer,
   signal,
   untracked,
 } from '@angular/core'
-import { Router } from '@angular/router'
+import { NavigationError, NavigationStart, Router } from '@angular/router'
 import { HttpErrorResponse } from '@angular/common/http'
 import { catchError, from, switchMap, throwError } from 'rxjs'
 import { api, auth, lazyChannel, refreshSession, resultFromResponse } from '@tylix/client'
@@ -282,3 +285,54 @@ export function tylixInterceptor(request, next) {
     }),
   )
 }
+
+// The error that broke the current page, or null. One per app (and so one
+// per server render).
+const APP_ERROR = new InjectionToken('tylix:app-error', {
+  providedIn: 'root',
+  factory: () => signal(null),
+})
+
+// Angular has no error boundaries: an error in a template or a failed
+// navigation reaches the ErrorHandler and leaves a half-rendered view. With
+// this provider such errors are kept in a signal, so the app shell can show
+// an error page instead (see injectAppError). A new navigation clears it.
+//
+//   providers: [provideAppErrorHandler()]
+//
+// Errors are still logged to the console, and passed to `onError` if given
+// (to report them somewhere).
+export function provideAppErrorHandler({ onError } = {}) {
+  return makeEnvironmentProviders([
+    {
+      provide: ErrorHandler,
+      useFactory: () => {
+        const state = inject(APP_ERROR)
+        return {
+          handleError(error) {
+            console.error(error)
+            onError?.(error)
+            state.set(error ?? new Error('Unknown error'))
+          },
+        }
+      },
+    },
+    provideEnvironmentInitializer(() => {
+      const state = inject(APP_ERROR)
+      const router = inject(Router, { optional: true })
+      router?.events.subscribe((event) => {
+        if (event instanceof NavigationStart) state.set(null)
+        else if (event instanceof NavigationError) state.set(event.error ?? new Error('Navigation failed'))
+      })
+    }),
+  ])
+}
+
+// The error provideAppErrorHandler caught, as a signal, and clear() to try
+// the page again. Call in an injection context.
+//   readonly appError = injectAppError()
+//   @if (appError.error()) { <app-error-page /> } @else { <router-outlet /> }
+export function injectAppError() {
+  const state = inject(APP_ERROR)
+  return { error: state.asReadonly(), clear: () => state.set(null) }
+}