@benjavicente/angular-router-experimental 1.142.11 → 1.142.13

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

@@ -22,43 +22,6 @@ export declare function injectRouteErrorHandler<TRouter extends AnyRouter = Regi
 export { }
 
 
-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 module '@benjavicente/router-core' {
     interface RouterOptionsExtensions {
         /**
@@ -96,8 +59,46 @@ 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 {
+    }
+    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 module '@benjavicente/router-core' {
+    interface RouterReadableStore<TValue> extends Readable<TValue> {
+    }
     interface RouterStores<in out TRouteTree extends AnyRoute> {
+        /** Maps each active routeId to the matchId of its child in the match tree. */
         childMatchIdByRouteId: RouterReadableStore<Record<string, string>>;
+        /** Maps each pending routeId to true for quick lookup. */
         pendingRouteIds: RouterReadableStore<Record<string, boolean>>;
     }
 }

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

@@ -28,6 +28,7 @@ import { HistoryAction } from '@benjavicente/history';
 import { HistoryLocation } from '@benjavicente/history';
 import { HistoryState } from '@benjavicente/history';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { InputSignal } from '@angular/core';
 import { isRedirect } from '@benjavicente/router-core';
 import { lazyFn } from '@benjavicente/router-core';
@@ -40,7 +41,6 @@ import { MakeRouteMatchUnion } from '@benjavicente/router-core';
 import { MaskOptions } from '@benjavicente/router-core';
 import { MatchRouteOptions } from '@benjavicente/router-core';
 import { NavigateOptions } from '@benjavicente/router-core';
-import { NoInfer as NoInfer_2 } from '@benjavicente/router-core';
 import { notFound } from '@benjavicente/router-core';
 import { NotFoundError } from '@benjavicente/router-core';
 import { ParsedLocation } from '@benjavicente/router-core';
@@ -158,6 +158,10 @@ export declare function buildManagedDocumentContent(router: AnyRouter): ManagedD
  */
 export declare function buildMatchManagedDocumentContent(router: AnyRouter): ManagedDocumentContent;
 
+declare type CompatibilityInjectStoreOptions<TSelected> = CreateSignalOptions<TSelected> & {
+    injector?: Injector;
+};
+
 export { createBrowserHistory }
 
 export { CreateFileRoute }
@@ -228,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> {
@@ -277,7 +283,7 @@ export declare type InjectMatchResult<TRouter extends AnyRouter, TFrom, TStrict
 
 export declare type InjectMatchRoute<out TFrom> = <TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown>(opts?: InjectMatchBaseOptions<TRouter, TFrom, true, true, TSelected>) => Angular.Signal<InjectMatchResult<TRouter, TFrom, true, TSelected>>;
 
-export declare function injectMatchRoute<TRouter extends AnyRouter = RegisteredRouter>(): <const TFrom extends string = string, const TTo extends string | undefined = undefined, const TMaskFrom extends string = TFrom, const TMaskTo extends string = "">(opts: InjectMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Angular.Signal<false | Expand<ResolveRoute<TRouter, TFrom, NoInfer_2<TTo>>["types"]["allParams"]>>;
+export declare function injectMatchRoute<TRouter extends AnyRouter = RegisteredRouter>(): <const TFrom extends string = string, const TTo extends string | undefined = undefined, const TMaskFrom extends string = TFrom, const TMaskTo extends string = "">(opts: InjectMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Angular.Signal<false | Expand<ResolveRoute<TRouter, TFrom, TTo>["types"]["allParams"]>>;
 
 export declare type InjectMatchRouteOptions<TRouter extends AnyRouter = RegisteredRouter, TFrom extends string = string, TTo extends string | undefined = undefined, TMaskFrom extends string = TFrom, TMaskTo extends string = ''> = ToSubOptionsProps<TRouter, TFrom, TTo> & DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> & DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> & MaskOptions<TRouter, TMaskFrom, TMaskTo> & MatchRouteOptions;
 
@@ -335,7 +341,9 @@ export declare type InjectSearchRoute<out TFrom> = <TRouter extends AnyRouter =
  */
 export declare function injectSsrScrollRestorationScript(): void;
 
-export declare function injectStore<TState, TSelected = NoInfer<TState>>(storeOrStoreSignal: ReadableStore<TState> | (() => ReadableStore<TState>), selector?: (state: NoInfer<TState>) => TSelected, options?: CreateSignalOptions<TSelected>): Signal<TSelected>;
+export declare function injectStore<TState, TSelected = NoInfer<TState>>(store: SelectionSource<TState>, selector?: (state: NoInfer<TState>) => TSelected, options?: CompatibilityInjectStoreOptions<TSelected>): Signal<TSelected>;
+
+export declare function injectStore<TState, TSelected = NoInfer<TState>>(store: SelectionSource<TState> | (() => SelectionSource<TState>), selector?: (state: NoInfer<TState>) => TSelected, options?: CompatibilityInjectStoreOptions<TSelected>): Signal<TSelected>;
 
 declare class InternalFileRouteFactory<TFilePath extends keyof FileRoutesByPath, TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'], TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'], TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'], TFullPath extends RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath']> {
     createRoute: <TRegister = Register, TSearchValidator = undefined, TParams = ResolveParams<TPath>, TRouteContextFn = AnyContext, TBeforeLoadFn = AnyContext, TLoaderDeps extends Record<string, any> = {}, TLoaderFn = undefined, TChildren = unknown, TSSR = unknown, TMiddlewares = unknown, THandlers = undefined>(options?: FileBaseRouteOptions<TRegister, TParentRoute, TId, TPath, TSearchValidator, TParams, TLoaderDeps, TLoaderFn, AnyContext, TRouteContextFn, TBeforeLoadFn, AnyContext, TSSR, TMiddlewares, THandlers> & UpdatableRouteOptions<TParentRoute, TId, TFullPath, TParams, TSearchValidator, TLoaderFn, TLoaderDeps, AnyContext, TRouteContextFn, TBeforeLoadFn>) => Route_2<TRegister, TParentRoute, TPath, TFullPath, TFilePath, TId, TSearchValidator, TParams, AnyContext, TRouteContextFn, TBeforeLoadFn, TLoaderDeps, TLoaderFn, TChildren, unknown, TSSR, TMiddlewares, THandlers>;
@@ -484,10 +492,6 @@ export declare function provideTanstackRouter({ router, context, options, }: Tan
     useFactory?: undefined;
 })[];
 
-declare type ReadableStore<TState> = {
-    state: TState;
-};
-
 export { redirect }
 
 export { Register }
@@ -495,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>;
@@ -556,6 +560,7 @@ export declare class RouteMatch {
     matchId: InputSignal<string>;
     router: AnyRouter;
     match: Signal<AnyRouteMatch | undefined>;
+    private matchSignal;
     matchData: Signal<{
         key: string | undefined;
         route: AnyRoute;
@@ -570,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;
 }
@@ -604,6 +609,13 @@ export declare class RouterProvider<TRouter extends AnyRouter = RegisteredRouter
 
 export { RouterState }
 
+declare type SelectionSource<T> = {
+    get: () => T;
+    subscribe: (listener: (value: T) => void) => {
+        unsubscribe: () => void;
+    };
+};
+
 export declare type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (args: ShouldBlockFnArgs<TRouter>) => boolean | Promise<boolean>;
 
 declare type ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {
@@ -645,43 +657,6 @@ export declare type UseBlockerOpts<TRouter extends AnyRouter = RegisteredRouter,
 export { }
 
 
-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 module '@benjavicente/router-core' {
     interface RouterOptionsExtensions {
         /**
@@ -719,8 +694,46 @@ 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 {
+    }
+    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 module '@benjavicente/router-core' {
+    interface RouterReadableStore<TValue> extends Readable<TValue> {
+    }
     interface RouterStores<in out TRouteTree extends AnyRoute> {
+        /** Maps each active routeId to the matchId of its child in the match tree. */
         childMatchIdByRouteId: RouterReadableStore<Record<string, string>>;
+        /** Maps each pending routeId to true for quick lookup. */
         pendingRouteIds: RouterReadableStore<Record<string, boolean>>;
     }
 }

package/package.json

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

package/src/Match.ts

@@ -16,14 +16,40 @@ import {
   rootRouteId,
 } from '@benjavicente/router-core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 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'
+
+const dummyMatchStore = {
+  get: () => undefined as AnyRouteMatch | undefined,
+  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,
@@ -35,7 +61,7 @@ function injectOnRendered({
   const destroyRef = inject(DestroyRef)
   const location = injectStore(
     router.stores.resolvedLocation,
-    (resolvedLocation) => resolvedLocation?.state.__TSR_key,
+    (resolvedLocation) => resolvedLocation?.state?.__TSR_key,
   )
   const loadedAt = injectStore(router.stores.loadedAt, (value) => value)
 
@@ -68,8 +94,8 @@ function injectOnRendered({
           router.emit({
             type: 'onRendered',
             ...getLocationChangeInfo(
-              router.stores.location.state,
-              router.stores.resolvedLocation.state,
+              router.stores.location.get(),
+              router.stores.resolvedLocation.get(),
             ),
           })
         },
@@ -84,6 +110,7 @@ function injectOnRendered({
   template: '',
   standalone: true,
   host: {
+    hidden: '',
     '[attr.data-matchId]': 'matchId()',
   },
 })
@@ -93,11 +120,12 @@ export class RouteMatch {
   router = injectRouter()
 
   match = computed(() => {
-    const matchId = this.matchId()
-    return matchId
-      ? this.router.stores.activeMatchStoresById.get(matchId)?.state
-      : undefined
+    return this.matchSignal()
   })
+  private matchSignal = injectStore(
+    () => this.router.stores.matchStores.get(this.matchId()) ?? dummyMatchStore,
+    (value) => value,
+  )
 
   matchData = computed(() => {
     const match = this.match()
@@ -141,16 +169,17 @@ export class RouteMatch {
     return this.resolvedNoSsr() || !!match._displayPending
   })
 
-  parentRouteIdSignal = computed(
-    () => this.matchData()?.parentRouteId ?? '',
-  )
+  parentRouteIdSignal = computed(() => this.matchData()?.parentRouteId ?? '')
   rootRouteIdSignal = computed(() => rootRouteId)
 
   hasPendingMatch = computed(() => {
     const routeId = this.matchData()?.route.id
     return routeId ? Boolean(this.pendingRouteIds()[routeId]) : false
   })
-  pendingRouteIds = injectStore(this.router.stores.pendingRouteIds, (ids) => ids)
+  pendingRouteIds = injectStore(
+    this.router.stores.pendingRouteIds,
+    (ids) => ids,
+  )
   nearestMatchContext: NearestMatchContextValue = {
     matchId: this.matchId,
     routeId: computed(() => this.matchData()?.route.id),
@@ -158,7 +187,7 @@ export class RouteMatch {
     hasPending: this.hasPendingMatch,
   }
 
-  isCatchingError = injectIsCatchingError({
+  catchingErrorMatch = injectCatchingErrorMatch({
     matchId: this.matchId,
   })
 
@@ -166,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)
@@ -178,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()
               },
@@ -258,23 +291,27 @@ export class RouteMatch {
   selector: 'outlet,[outlet]',
   template: '',
   standalone: true,
+  host: {
+    hidden: '',
+  },
 })
 export class Outlet {
   router = injectRouter()
   nearestMatch = inject(MATCH_CONTEXT_INJECTOR_TOKEN)
 
-  currentMatch = computed(() => {
-    const matchId = this.nearestMatch.matchId()
-    return matchId
-      ? this.router.stores.activeMatchStoresById.get(matchId)?.state
-      : undefined
-  })
+  currentMatch = injectStore(
+    () => {
+      const matchId = this.nearestMatch.matchId()
+      return matchId
+        ? (this.router.stores.matchStores.get(matchId) ?? dummyMatchStore)
+        : dummyMatchStore
+    },
+    (value) => value,
+  )
 
   routeId = computed(() => this.currentMatch()?.routeId as string)
 
-  route = computed(
-    () => this.router.routesById[this.routeId()] as AnyRoute,
-  )
+  route = computed(() => this.router.routesById[this.routeId()] as AnyRoute)
 
   parentGlobalNotFound = computed(
     () => this.currentMatch()?.globalNotFound ?? false,
@@ -310,7 +347,9 @@ export class Outlet {
   })
 }
 
-type CalledIfFunction<T> = T extends (...args: Array<any>) => any ? ReturnType<T> : T
+type CalledIfFunction<T> = T extends (...args: Array<any>) => any
+  ? ReturnType<T>
+  : T
 
 function getComponent<T>(routeComponent: T): CalledIfFunction<T> {
   if (typeof routeComponent === 'function') {
@@ -336,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/Matches.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 import { injectRender } from './renderer/injectRender'
 import { RouteMatch } from './Match'
 import { injectSsrScrollRestorationScript } from './ssr-scroll-restoration'
@@ -10,11 +10,14 @@ import { injectTransitionerSetup } from './transitioner'
   selector: 'router-matches',
   template: '',
   standalone: true,
+  host: {
+    hidden: '',
+  },
 })
 export class Matches {
   router = injectRouter()
 
-  private matchId = injectStore(this.router.stores.firstMatchId, (id) => id)
+  private matchId = injectStore(this.router.stores.firstId, (id) => id)
 
   private ssrScrollRestoration = injectSsrScrollRestorationScript()
 

package/src/RouterProvider.ts

@@ -75,6 +75,9 @@ export function provideTanstackRouter({
   selector: 'router-provider,[router-provider]',
   template: '',
   standalone: true,
+  host: {
+    hidden: '',
+  },
 })
 export class RouterProvider<TRouter extends AnyRouter = RegisteredRouter> {
   readonly injectedContext: RouterInputs<TRouter>['context'] = inject(

package/src/document/build-match-managed-document.ts

@@ -16,7 +16,7 @@ export function buildMatchManagedDocumentContent(
   router: AnyRouter,
 ): ManagedDocumentContent {
   const nonce = router.options.ssr?.nonce
-  const matches = router.stores.activeMatchesSnapshot.state
+  const matches = router.stores.matches.get()
   const title = selectTitle(matches)
   const metaTags = selectMetaTags(matches, nonce)
   const links = selectConstructedLinks(matches, nonce)

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
-import { injectStore } from '../injectStore'
+import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
 import {
   collectDehydrationScriptManagedTags,
@@ -9,7 +9,10 @@ import {
 import { areManagedDocumentContentsEqual } from './document-equality'
 import { createManagedTagCollection } from './managed-dom'
 import type { AnyRouter } from '@benjavicente/router-core'
-import type { ManagedDocumentContent, ManagedTagCollection } from './managed-document-types'
+import type {
+  ManagedDocumentContent,
+  ManagedTagCollection,
+} from './managed-document-types'
 
 function applyManagedDocumentContent({
   document,
@@ -45,7 +48,7 @@ export function installUnifiedTanstackDocumentSync(injectedRouter: AnyRouter) {
   })
   const destroyRef = Angular.inject(Angular.DestroyRef)
   const activeMatches = injectStore(
-    injectedRouter.stores.activeMatchesSnapshot,
+    injectedRouter.stores.matches,
     (matches) => matches,
   )
 

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
-import { injectStore } from '../injectStore'
+import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
 import { collectDehydrationScriptManagedTags } from './document-dehydration'
 import { areManagedTagArraysEqual } from './document-equality'
@@ -20,7 +20,7 @@ export function installTanstackBodyManagedTags(injectedRouter: AnyRouter) {
   })
   const destroyRef = Angular.inject(Angular.DestroyRef)
   const activeMatches = injectStore(
-    injectedRouter.stores.activeMatchesSnapshot,
+    injectedRouter.stores.matches,
     (matches) => matches,
   )
 

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
-import { injectStore } from '../injectStore'
+import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
 import { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
 import type { AnyRouter } from '@benjavicente/router-core'
@@ -10,14 +10,13 @@ export function installTanstackDocumentTitle(injectedRouter: AnyRouter) {
   const document = Angular.inject(DOCUMENT)
   const destroyRef = Angular.inject(Angular.DestroyRef)
   const activeMatches = injectStore(
-    injectedRouter.stores.activeMatchesSnapshot,
+    injectedRouter.stores.matches,
     (matches) => matches,
   )
 
   const initialTitle = document.title
-  let currentTitle: string | undefined = buildMatchManagedDocumentContent(
-    injectedRouter,
-  ).title
+  let currentTitle: string | undefined =
+    buildMatchManagedDocumentContent(injectedRouter).title
 
   const applyTitle = (next?: string) => {
     if (next !== undefined) {

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common'
 import * as Angular from '@angular/core'
-import { injectStore } from '../injectStore'
+import { injectStore } from '../store/injectStore'
 import { buildMatchManagedDocumentContent } from './build-match-managed-document'
 import { areManagedTagArraysEqual } from './document-equality'
 import { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
@@ -16,7 +16,7 @@ export function installTanstackHeadManagedTags(injectedRouter: AnyRouter) {
   })
   const destroyRef = Angular.inject(Angular.DestroyRef)
   const activeMatches = injectStore(
-    injectedRouter.stores.activeMatchesSnapshot,
+    injectedRouter.stores.matches,
     (matches) => matches,
   )