@benjavicente/angular-router-experimental 1.142.12 → 1.142.14

package/dist/types/tanstack-angular-router-experimental-experimental.d.ts

@@ -22,6 +22,40 @@ export declare function injectRouteErrorHandler<TRouter extends AnyRouter = Regi
 export { }
 
 
+declare module '@benjavicente/router-core' {
+    interface LazyRoute<in out TRoute extends AnyRoute> {
+        injectMatch: InjectMatchRoute<TRoute['id']>;
+        injectRouteContext: InjectRouteContextRoute<TRoute['id']>;
+        injectSearch: InjectSearchRoute<TRoute['id']>;
+        injectParams: InjectParamsRoute<TRoute['id']>;
+        injectLoaderDeps: InjectLoaderDepsRoute<TRoute['id']>;
+        injectLoaderData: InjectLoaderDataRoute<TRoute['id']>;
+        injectNavigate: () => UseNavigateResult<TRoute['fullPath']>;
+    }
+}
+
+
+declare module '@benjavicente/router-core' {
+    interface UpdatableRouteOptionsExtensions {
+        component?: RouteComponent;
+        errorComponent?: false | null | undefined | ErrorRouteComponent;
+        notFoundComponent?: NotFoundRouteComponent;
+        pendingComponent?: RouteComponent;
+    }
+    interface RootRouteOptionsExtensions {
+    }
+    interface RouteExtensions<in out TId extends string, in out TFullPath extends string> {
+        injectMatch: InjectMatchRoute<TId>;
+        injectRouteContext: InjectRouteContextRoute<TId>;
+        injectSearch: InjectSearchRoute<TId>;
+        injectParams: InjectParamsRoute<TId>;
+        injectLoaderDeps: InjectLoaderDepsRoute<TId>;
+        injectLoaderData: InjectLoaderDataRoute<TId>;
+        injectNavigate: () => UseNavigateResult<TFullPath>;
+    }
+}
+
+
 declare module '@benjavicente/router-core' {
     interface RouterOptionsExtensions {
         /**
@@ -58,39 +92,9 @@ declare module '@benjavicente/router-core' {
 }
 
 
-declare module '@benjavicente/router-core' {
-    interface UpdatableRouteOptionsExtensions {
-        component?: RouteComponent;
-        errorComponent?: false | null | undefined | ErrorRouteComponent;
-        notFoundComponent?: NotFoundRouteComponent;
-        pendingComponent?: RouteComponent;
-    }
-    interface RootRouteOptionsExtensions {
-        shellComponent?: Angular.Type<{
-            children: any;
-        }>;
-    }
-    interface RouteExtensions<in out TId extends string, in out TFullPath extends string> {
-        injectMatch: InjectMatchRoute<TId>;
-        injectRouteContext: InjectRouteContextRoute<TId>;
-        injectSearch: InjectSearchRoute<TId>;
-        injectParams: InjectParamsRoute<TId>;
-        injectLoaderDeps: InjectLoaderDepsRoute<TId>;
-        injectLoaderData: InjectLoaderDataRoute<TId>;
-        injectNavigate: () => UseNavigateResult<TFullPath>;
-    }
-}
-
-
-declare module '@benjavicente/router-core' {
-    interface LazyRoute<in out TRoute extends AnyRoute> {
-        injectMatch: InjectMatchRoute<TRoute['id']>;
-        injectRouteContext: InjectRouteContextRoute<TRoute['id']>;
-        injectSearch: InjectSearchRoute<TRoute['id']>;
-        injectParams: InjectParamsRoute<TRoute['id']>;
-        injectLoaderDeps: InjectLoaderDepsRoute<TRoute['id']>;
-        injectLoaderData: InjectLoaderDataRoute<TRoute['id']>;
-        injectNavigate: () => UseNavigateResult<TRoute['fullPath']>;
+declare global {
+    interface Window {
+        __TSR_ROUTER_INJECTION_KEY__?: Angular.InjectionToken<AnyRouter>;
     }
 }
 
@@ -105,10 +109,3 @@ declare module '@benjavicente/router-core' {
         pendingRouteIds: RouterReadableStore<Record<string, boolean>>;
     }
 }
-
-
-declare global {
-    interface Window {
-        __TSR_ROUTER_INJECTION_KEY__?: Angular.InjectionToken<AnyRouter>;
-    }
-}

package/dist/types/tanstack-angular-router-experimental.d.ts

@@ -232,6 +232,8 @@ export declare function injectErrorState(): {
     };
 };
 
+export declare function injectIsShell(): Signal<boolean>;
+
 export declare function injectLoaderData<TRouter extends AnyRouter = RegisteredRouter, const TFrom extends string | undefined = undefined, TStrict extends boolean = true, TSelected = unknown>(opts: InjectLoaderDataOptions<TRouter, TFrom, TStrict, TSelected>): Angular.Signal<UseLoaderDataResult<TRouter, TFrom, TStrict, TSelected>>;
 
 export declare interface InjectLoaderDataBaseOptions<TRouter extends AnyRouter, TFrom, TStrict extends boolean, TSelected> {
@@ -497,7 +499,7 @@ export { Register }
 export { RegisteredRouter }
 
 declare type RenderValue = {
-    key?: string;
+    key?: unknown;
     component: Type<any> | null | undefined;
     inputs?: Record<string, () => unknown>;
     providers?: Array<Provider>;
@@ -573,7 +575,7 @@ export declare class RouteMatch {
     hasPendingMatch: Signal<boolean>;
     pendingRouteIds: Signal<Record<string, boolean>>;
     nearestMatchContext: NearestMatchContextValue;
-    isCatchingError: Signal<boolean>;
+    catchingErrorMatch: Signal<AnyRouteMatch | undefined>;
     render: void;
     onRendered: void;
 }
@@ -655,6 +657,40 @@ export declare type UseBlockerOpts<TRouter extends AnyRouter = RegisteredRouter,
 export { }
 
 
+declare module '@benjavicente/router-core' {
+    interface LazyRoute<in out TRoute extends AnyRoute> {
+        injectMatch: InjectMatchRoute<TRoute['id']>;
+        injectRouteContext: InjectRouteContextRoute<TRoute['id']>;
+        injectSearch: InjectSearchRoute<TRoute['id']>;
+        injectParams: InjectParamsRoute<TRoute['id']>;
+        injectLoaderDeps: InjectLoaderDepsRoute<TRoute['id']>;
+        injectLoaderData: InjectLoaderDataRoute<TRoute['id']>;
+        injectNavigate: () => UseNavigateResult<TRoute['fullPath']>;
+    }
+}
+
+
+declare module '@benjavicente/router-core' {
+    interface UpdatableRouteOptionsExtensions {
+        component?: RouteComponent;
+        errorComponent?: false | null | undefined | ErrorRouteComponent;
+        notFoundComponent?: NotFoundRouteComponent;
+        pendingComponent?: RouteComponent;
+    }
+    interface RootRouteOptionsExtensions {
+    }
+    interface RouteExtensions<in out TId extends string, in out TFullPath extends string> {
+        injectMatch: InjectMatchRoute<TId>;
+        injectRouteContext: InjectRouteContextRoute<TId>;
+        injectSearch: InjectSearchRoute<TId>;
+        injectParams: InjectParamsRoute<TId>;
+        injectLoaderDeps: InjectLoaderDepsRoute<TId>;
+        injectLoaderData: InjectLoaderDataRoute<TId>;
+        injectNavigate: () => UseNavigateResult<TFullPath>;
+    }
+}
+
+
 declare module '@benjavicente/router-core' {
     interface RouterOptionsExtensions {
         /**
@@ -691,39 +727,9 @@ declare module '@benjavicente/router-core' {
 }
 
 
-declare module '@benjavicente/router-core' {
-    interface UpdatableRouteOptionsExtensions {
-        component?: RouteComponent;
-        errorComponent?: false | null | undefined | ErrorRouteComponent;
-        notFoundComponent?: NotFoundRouteComponent;
-        pendingComponent?: RouteComponent;
-    }
-    interface RootRouteOptionsExtensions {
-        shellComponent?: Angular.Type<{
-            children: any;
-        }>;
-    }
-    interface RouteExtensions<in out TId extends string, in out TFullPath extends string> {
-        injectMatch: InjectMatchRoute<TId>;
-        injectRouteContext: InjectRouteContextRoute<TId>;
-        injectSearch: InjectSearchRoute<TId>;
-        injectParams: InjectParamsRoute<TId>;
-        injectLoaderDeps: InjectLoaderDepsRoute<TId>;
-        injectLoaderData: InjectLoaderDataRoute<TId>;
-        injectNavigate: () => UseNavigateResult<TFullPath>;
-    }
-}
-
-
-declare module '@benjavicente/router-core' {
-    interface LazyRoute<in out TRoute extends AnyRoute> {
-        injectMatch: InjectMatchRoute<TRoute['id']>;
-        injectRouteContext: InjectRouteContextRoute<TRoute['id']>;
-        injectSearch: InjectSearchRoute<TRoute['id']>;
-        injectParams: InjectParamsRoute<TRoute['id']>;
-        injectLoaderDeps: InjectLoaderDepsRoute<TRoute['id']>;
-        injectLoaderData: InjectLoaderDataRoute<TRoute['id']>;
-        injectNavigate: () => UseNavigateResult<TRoute['fullPath']>;
+declare global {
+    interface Window {
+        __TSR_ROUTER_INJECTION_KEY__?: Angular.InjectionToken<AnyRouter>;
     }
 }
 
@@ -738,10 +744,3 @@ declare module '@benjavicente/router-core' {
         pendingRouteIds: RouterReadableStore<Record<string, boolean>>;
     }
 }
-
-
-declare global {
-    interface Window {
-        __TSR_ROUTER_INJECTION_KEY__?: Angular.InjectionToken<AnyRouter>;
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benjavicente/angular-router-experimental",
-  "version": "1.142.12",
+  "version": "1.142.14",
   "description": "Modern and scalable routing for Angular applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -50,11 +50,11 @@
     "node": ">=20.19"
   },
   "dependencies": {
-    "@benjavicente/history": "^1.161.6",
-    "@benjavicente/router-core": "^1.169.2",
     "@tanstack/store": "^0.9.3",
     "isbot": "^5.1.22",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "@benjavicente/router-core": "1.169.2",
+    "@benjavicente/history": "1.161.6"
   },
   "devDependencies": {
     "@analogjs/vitest-angular": "^2.2.1",

package/src/Match.ts

@@ -21,7 +21,7 @@ import { DefaultNotFoundComponent } from './DefaultNotFound'
 import { MATCH_CONTEXT_INJECTOR_TOKEN } from './matchInjectorToken'
 import { injectRender } from './renderer/injectRender'
 import { ERROR_STATE_INJECTOR_TOKEN } from './injectErrorState'
-import { injectIsCatchingError } from './renderer/injectIsCatchingError'
+import { injectCatchingErrorMatch } from './renderer/injectIsCatchingError'
 import type { Signal } from '@angular/core'
 import type { NearestMatchContextValue } from './matchInjectorToken'
 import type { AnyRouteMatch } from '@benjavicente/router-core'
@@ -31,6 +31,26 @@ const dummyMatchStore = {
   subscribe: () => ({ unsubscribe: () => {} }),
 }
 
+@Component({
+  selector: 'tanstack-router-default-error',
+  template: `
+    <div role="alert">
+      <p>Something went wrong.</p>
+      <pre>{{ message() }}</pre>
+    </div>
+  `,
+  standalone: true,
+})
+export class DefaultErrorComponent {
+  state = inject(ERROR_STATE_INJECTOR_TOKEN)
+
+  message = computed(() => {
+    const error = this.state.error
+    if (error instanceof Error) return error.stack ?? error.message
+    return String(error)
+  })
+}
+
 function injectOnRendered({
   parentRouteIsRoot,
 }: {
@@ -167,7 +187,7 @@ export class RouteMatch {
     hasPending: this.hasPendingMatch,
   }
 
-  isCatchingError = injectIsCatchingError({
+  catchingErrorMatch = injectCatchingErrorMatch({
     matchId: this.matchId,
   })
 
@@ -175,11 +195,15 @@ export class RouteMatch {
     const matchData = this.matchData()
     if (!matchData) return null
 
+    const { match, route } = matchData
+
     if (this.shouldClientOnly() && this.router.isServer) {
-      return null
-    }
+      const PendingComponent =
+        getComponent(route.options.pendingComponent) ??
+        getComponent(this.router.options.defaultPendingComponent)
 
-    const { match, route } = matchData
+      return PendingComponent ? { component: PendingComponent } : null
+    }
 
     if (match.status === 'notFound') {
       const NotFoundComponent = getNotFoundComponent(this.router, route)
@@ -187,18 +211,18 @@ export class RouteMatch {
       return {
         component: NotFoundComponent,
       }
-    } else if (match.status === 'error' || this.isCatchingError()) {
-      const RouteErrorComponent =
-        getComponent(route.options.errorComponent) ??
-        getComponent(this.router.options.defaultErrorComponent)
+    } else if (match.status === 'error' || this.catchingErrorMatch()) {
+      const caughtMatch = this.catchingErrorMatch()
+      const RouteErrorComponent = getErrorComponent(this.router, route)
 
       return {
-        component: RouteErrorComponent || null,
+        component: RouteErrorComponent,
         providers: [
           {
             provide: ERROR_STATE_INJECTOR_TOKEN,
             useValue: {
-              error: match.error,
+              error:
+                match.status === 'error' ? match.error : caughtMatch?.error,
               reset: () => {
                 this.router.invalidate()
               },
@@ -351,3 +375,21 @@ function getNotFoundComponent(router: AnyRouter, route: AnyRoute) {
 
   return DefaultNotFoundComponent
 }
+
+function getErrorComponent(router: AnyRouter, route: AnyRoute) {
+  const RouteErrorComponent =
+    getComponent(route.options.errorComponent) ??
+    getComponent(router.options.defaultErrorComponent)
+
+  if (RouteErrorComponent) {
+    return RouteErrorComponent
+  }
+
+  if (isDevMode() && !route.options.errorComponent) {
+    console.warn(
+      `An error was encountered on the route with ID "${route.id}", but an errorComponent option was not configured, nor was a router level defaultErrorComponent configured. Consider configuring at least one of these to avoid TanStack Router's generic defaultErrorComponent.`,
+    )
+  }
+
+  return DefaultErrorComponent
+}

package/src/document/install-unified-document-sync.ts

@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
 import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
@@ -42,7 +41,7 @@ function applyManagedDocumentContent({
  * Used by `provideTanstackDocument` when all features are enabled.
  */
 export function installUnifiedTanstackDocumentSync(injectedRouter: AnyRouter) {
-  const document = Angular.inject(DOCUMENT)
+  const document = Angular.inject(Angular.DOCUMENT)
   const rendererFactory = Angular.inject(Angular.RendererFactory2, {
     optional: true,
   })

package/src/document/provide-tanstack-body-managed-tags.ts

@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
 import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
@@ -14,7 +13,7 @@ import type { ManagedTag } from './managed-document-types'
  * on the server only (call from an injection context).
  */
 export function installTanstackBodyManagedTags(injectedRouter: AnyRouter) {
-  const document = Angular.inject(DOCUMENT)
+  const document = Angular.inject(Angular.DOCUMENT)
   const rendererFactory = Angular.inject(Angular.RendererFactory2, {
     optional: true,
   })

package/src/document/provide-tanstack-document-title.ts

@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
 import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
@@ -7,7 +6,7 @@ import type { AnyRouter } from '@benjavicente/router-core'
 
 /** Sync `document.title` from the router (call from an injection context). */
 export function installTanstackDocumentTitle(injectedRouter: AnyRouter) {
-  const document = Angular.inject(DOCUMENT)
+  const document = Angular.inject(Angular.DOCUMENT)
   const destroyRef = Angular.inject(Angular.DestroyRef)
   const activeMatches = injectStore(
     injectedRouter.stores.matches,

package/src/document/provide-tanstack-head-managed-tags.ts

@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
 import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
@@ -10,7 +9,7 @@ import type { ManagedTag } from './managed-document-types'
 
 /** Managed `<head>` tags from active matches (call from an injection context). */
 export function installTanstackHeadManagedTags(injectedRouter: AnyRouter) {
-  const document = Angular.inject(DOCUMENT)
+  const document = Angular.inject(Angular.DOCUMENT)
   const rendererFactory = Angular.inject(Angular.RendererFactory2, {
     optional: true,
   })

package/src/index.ts

@@ -61,6 +61,7 @@ export {
 
 // Injection functions
 export { injectRouter } from './injectRouter'
+export { injectIsShell } from './injectIsShell'
 
 export {
   injectRouterState,

package/src/injectIsShell.ts

@@ -0,0 +1,7 @@
+import { computed } from '@angular/core'
+import { injectRouter } from './injectRouter'
+
+export function injectIsShell() {
+  const router = injectRouter()
+  return computed(() => router.isShell())
+}

package/src/renderer/injectIsCatchingError.ts

@@ -1,13 +1,13 @@
 import * as Angular from '@angular/core'
 import { injectRouter } from '../injectRouter'
 import { injectRouterState } from '../injectRouterState'
-import type { AnyRoute } from '@benjavicente/router-core'
+import type { AnyRoute, AnyRouteMatch } from '@benjavicente/router-core'
 
-export function injectIsCatchingError({
+export function injectCatchingErrorMatch({
   matchId,
 }: {
   matchId: Angular.Signal<string | undefined>
-}): Angular.Signal<boolean> {
+}): Angular.Signal<AnyRouteMatch | undefined> {
   const router = injectRouter()
 
   const matches = injectRouterState({
@@ -20,21 +20,33 @@ export function injectIsCatchingError({
 
   return Angular.computed(() => {
     // The child route will handle the error with the default error component.
-    if (router.options.defaultErrorComponent != null) return false;
+    if (router.options.defaultErrorComponent != null) return undefined
 
     const startingIndex = matchIndex()
-    if (startingIndex === -1) return false
+    if (startingIndex === -1) return undefined
     const matchesList = matches()
 
     for (let i = startingIndex + 1; i < matchesList.length; i++) {
       const descendant = matchesList[i]
       const route = router.routesById[descendant?.routeId] as AnyRoute
       // Is catched by a child route with an error component.
-      if (route.options.errorComponent != null) return false
+      if (route.options.errorComponent != null) return undefined
 
       // Found error status without error component in between.
-      if (descendant?.status === "error") return true
+      if (descendant?.status === 'error') return descendant
     }
-    return false
+    return undefined
+  })
+}
+
+export function injectIsCatchingError({
+  matchId,
+}: {
+  matchId: Angular.Signal<string | undefined>
+}): Angular.Signal<boolean> {
+  const catchingErrorMatch = injectCatchingErrorMatch({ matchId })
+
+  return Angular.computed(() => {
+    return catchingErrorMatch() !== undefined
   })
 }

package/src/renderer/injectRender.ts

@@ -10,7 +10,7 @@ import type { Provider, Type } from '@angular/core'
 
 export type RenderValue =
   | {
-      key?: string
+      key?: unknown
       component: Type<any> | null | undefined
       inputs?: Record<string, () => unknown>
       providers?: Array<Provider>
@@ -57,7 +57,9 @@ export function injectRender(renderValueFn: () => RenderValue): void {
 function resolvedKey(value: RenderValue) {
   const component = value?.component
   if (!value || !component) return []
-  return [component, value.key]
+  return Array.isArray(value.key)
+    ? [component, ...value.key]
+    : [component, value.key]
 }
 
 function keysAreEqual(a: Array<any>, b: Array<any>) {

package/src/route.ts

@@ -53,9 +53,6 @@ declare module '@benjavicente/router-core' {
   }
 
   export interface RootRouteOptionsExtensions {
-    shellComponent?: Angular.Type<{
-      children: any
-    }>
   }
 
   export interface RouteExtensions<

package/src/ssr-scroll-restoration.ts

@@ -1,4 +1,4 @@
-import { DOCUMENT } from '@angular/common'
+import { DOCUMENT } from '@angular/core'
 import { EnvironmentInjector, afterNextRender, inject } from '@angular/core'
 import { getScrollRestorationScriptForRouter } from '@benjavicente/router-core/scroll-restoration-script'
 import { injectRouter } from './injectRouter'