@benjavicente/angular-router-experimental 1.142.11

package/experimental/injectRouteErrorHandler.ts

@@ -0,0 +1,51 @@
+import { DestroyRef, inject, untracked } from '@angular/core'
+import { injectMatch, injectRouter } from '@benjavicente/angular-router-experimental'
+import type { AnyRouter, FromPathOption, RegisteredRouter  } from '@benjavicente/router-core'
+
+/**
+ * EXPERIMENTAL
+ *
+ * While in other adapters you can use build-in error boundaries,
+ * Angular does not provide any. As an workarraound, we export a function
+ * to simulate an error boundary by changing the router state to show
+ * the error component.
+ *
+ * Note that an equivalent for suspense can't exist since we can't restore
+ * the component state when the promise is resolved as is with other adapters.
+ */
+export function injectRouteErrorHandler<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDefaultFrom extends string = string,
+>(options: { from?: FromPathOption<TRouter, TDefaultFrom> }) {
+  const router = injectRouter()
+  const match = injectMatch({ from: options.from })
+
+  let destroyed = false
+
+  inject(DestroyRef).onDestroy(() => {
+    destroyed = true
+  })
+
+  return {
+    throw: (error: Error) => {
+      if (destroyed) {
+        console.warn(
+          'Attempted to throw error to route after it has been destroyed',
+        )
+        return
+      }
+
+      const matchId = untracked(match).id
+
+      router.updateMatch(matchId, (match) => {
+        return {
+          ...match,
+          error,
+          status: 'error',
+          isFetching: false,
+          updatedAt: Date.now(),
+        }
+      })
+    },
+  }
+}

package/experimental/public_api.ts

@@ -0,0 +1,8 @@
+/**
+ * @experimental
+ *
+ * This entrypoint contains experimental APIs that may change or be removed
+ * in future versions. Use with caution.
+ */
+
+export { injectRouteErrorHandler } from './injectRouteErrorHandler'

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@benjavicente/angular-router-experimental",
+  "version": "1.142.11",
+  "description": "Modern and scalable routing for Angular applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/router.git",
+    "directory": "packages/angular-router-experimental"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "angular",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/types/tanstack-angular-router-experimental.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./dist/types/tanstack-angular-router-experimental.d.ts",
+      "require": null,
+      "default": "./dist/fesm2022/tanstack-angular-router-experimental.mjs"
+    },
+    "./experimental": {
+      "types": "./dist/types/tanstack-angular-router-experimental-experimental.d.ts",
+      "require": null,
+      "default": "./dist/fesm2022/tanstack-angular-router-experimental-experimental.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "experimental"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "dependencies": {
+    "isbot": "^5.1.22",
+    "tslib": "^2.3.0",
+    "@benjavicente/history": "1.161.6",
+    "@benjavicente/router-core": "1.168.9"
+  },
+  "devDependencies": {
+    "@analogjs/vitest-angular": "^2.2.1",
+    "@angular/common": "^21.2.6",
+    "@angular/compiler": "^21.2.6",
+    "@angular/compiler-cli": "^21.2.6",
+    "@angular/core": "^21.2.6",
+    "@angular/platform-browser": "^21.2.6",
+    "@oxc-angular/vite": "^0.0.22",
+    "@testing-library/angular": "^19.0.0",
+    "@tanstack/vite-config": "0.5.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/node": ">=20",
+    "combinate": "^1.1.11",
+    "jsdom": "^27.4.0",
+    "rxjs": "~7.8.0",
+    "vibe-rules": "^0.2.57",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.17",
+    "zod": "^3.24.2"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.6",
+    "@angular/core": "^21.2.6"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:eslint": "eslint",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts59": "tsc -p tsconfig.legacy.json",
+    "test:unit": "vitest",
+    "test:unit:dev": "vitest --watch",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build --config vite.lib.config.ts"
+  }
+}

package/src/DefaultNotFound.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'tanstack-angular-router-default-no-found',
+  template: `<p>Not found</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents;' },
+})
+export class DefaultNotFoundComponent {}

package/src/Link.ts

@@ -0,0 +1,352 @@
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  Renderer2,
+  afterNextRender,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+  untracked,
+} from '@angular/core'
+import {
+  AnyRouter,
+  LinkOptions as CoreLinkOptions,
+  RegisteredRouter,
+  RoutePaths,
+  deepEqual,
+  exactPathTest,
+  preloadWarning,
+  removeTrailingSlash,
+} from '@benjavicente/router-core'
+import { injectLocation } from './injectLocation'
+import { injectRouter } from './injectRouter'
+import { injectIntersectionObserver } from './injectIntersectionObserver'
+
+@Directive({
+  selector: 'a[link]',
+  exportAs: 'link',
+  standalone: true,
+  host: {
+    '[href]': 'hrefOption()?.href',
+    '(click)': 'handleClick($event)',
+    '(focus)': 'handleFocus()',
+    '(mouseenter)': 'handleEnter($event)',
+    '(mouseover)': 'handleEnter($event)',
+    '(mouseleave)': 'handleLeave($event)',
+    '[attr.target]': 'target()',
+    '[attr.role]': 'disabled() ? "link" : undefined',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.data-status]': 'isActive() ? "active" : undefined',
+    '[attr.aria-current]': 'isActive() ? "page" : undefined',
+    '[attr.data-transitioning]':
+      'isTransitioning() ? "transitioning" : undefined',
+    '[class]': 'isActiveProps()?.class',
+    '[style]': 'isActiveProps()?.style',
+  },
+})
+export class Link<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
+  TTo extends string | undefined = '.',
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
+  TMaskTo extends string = '.',
+> {
+  passiveEvents = injectPasiveEvents(() => ({
+    touchstart: this.handleTouchStart,
+  }))
+
+  options = input.required<
+    LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>
+  >({ alias: 'link' })
+
+  protected router = injectRouter()
+  protected isTransitioning = signal(false)
+
+  protected from = computed(() =>
+    untracked(() => this.options().from),
+  )
+
+  protected disabled = computed(() => this._options().disabled ?? false)
+  protected target = computed(() => this._options().target)
+
+  protected _options = computed<
+    LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>
+  >(() => {
+    return {
+      ...this.options(),
+      from: this.from(),
+    }
+  })
+
+  protected nextLocation = computed(() => {
+    const currentLocation = this.location()
+    return this.router.buildLocation({
+      _fromLocation: currentLocation,
+      ...this._options(),
+    } as any)
+  })
+
+  protected hrefOption = computed(() => {
+    if (this._options().disabled) {
+      return undefined
+    }
+
+    const location = this.nextLocation().maskedLocation ?? this.nextLocation()
+    const external = location.external
+    const href = external
+      ? location.publicHref
+      : this.router.history.createHref(location.publicHref) || '/'
+
+    return { href, external }
+  })
+
+  protected externalLink = computed(() => {
+    const hrefOption = this.hrefOption()
+    if (hrefOption?.external) {
+      return hrefOption.href
+    }
+    try {
+      new URL(this.options()['to'] as any)
+      return this.options()['to']
+    } catch { }
+    return undefined
+  })
+
+  protected preload = computed(() => {
+    if (this.options()['reloadDocument']) {
+      return false
+    }
+    return this.options()['preload'] ?? this.router.options.defaultPreload
+  })
+
+  protected preloadDelay = computed(() => {
+    return (
+      this.options()['preloadDelay'] ??
+      this.router.options.defaultPreloadDelay ??
+      0
+    )
+  })
+
+  protected location = injectLocation<TRouter>()
+
+  protected isActiveProps = computed(() => {
+    const opts = this.options()
+    const isActive = this.isActive()
+    const props = isActive ? opts.activeProps : opts.inactiveProps
+    if (!props || typeof props !== 'object') return undefined
+    return props
+  })
+
+  protected isActive = computed(() => {
+    if (this.externalLink()) return false
+
+    const options = this.options()
+    const activeOptions = options.activeOptions
+
+    if (activeOptions?.exact) {
+      const testExact = exactPathTest(
+        this.location().pathname,
+        this.nextLocation().pathname,
+        this.router.basepath,
+      )
+      if (!testExact) {
+        return false
+      }
+    } else {
+      const currentPathSplit = removeTrailingSlash(
+        this.location().pathname,
+        this.router.basepath,
+      )
+      const nextPathSplit = removeTrailingSlash(
+        this.nextLocation().pathname,
+        this.router.basepath,
+      )
+
+      const pathIsFuzzyEqual =
+        currentPathSplit.startsWith(nextPathSplit) &&
+        (currentPathSplit.length === nextPathSplit.length ||
+          currentPathSplit[nextPathSplit.length] === '/')
+
+      if (!pathIsFuzzyEqual) {
+        return false
+      }
+    }
+
+    if (activeOptions?.includeSearch ?? true) {
+      const searchTest = deepEqual(
+        this.location().search,
+        this.nextLocation().search,
+        {
+          partial: !activeOptions?.exact,
+          ignoreUndefined: !activeOptions?.explicitUndefined,
+        },
+      )
+      if (!searchTest) {
+        return false
+      }
+    }
+
+    if (activeOptions?.includeHash) {
+      return this.location().hash === this.nextLocation().hash
+    }
+    return true
+  })
+
+  protected doPreload = () => {
+    this.router.preloadRoute(this.options() as any).catch((err: any) => {
+      console.warn(err)
+      console.warn(preloadWarning)
+    })
+  }
+
+  protected preloadViewportIoCallback = (
+    entry: IntersectionObserverEntry | undefined,
+  ) => {
+    if (entry?.isIntersecting) {
+      this.doPreload()
+    }
+  }
+
+  private viewportPreloader = injectIntersectionObserver(
+    this.preloadViewportIoCallback,
+    { rootMargin: '100px' },
+    () => !!this._options().disabled || !(this.preload() === 'viewport'),
+  )
+
+  private hasRenderFetched = false
+  private rendererPreloader = effect(() => {
+    if (this.hasRenderFetched) return
+
+    if (!this._options().disabled && this.preload() === 'render') {
+      this.doPreload()
+      this.hasRenderFetched = true
+    }
+  })
+
+  protected handleClick = (event: MouseEvent) => {
+    const elementTarget = (
+      event.currentTarget as HTMLAnchorElement | SVGAElement
+    ).getAttribute('target')
+    const target = this._options().target
+    const effectiveTarget = target !== undefined ? target : elementTarget
+
+    if (
+      !this._options().disabled &&
+      !isCtrlEvent(event) &&
+      !event.defaultPrevented &&
+      (!effectiveTarget || effectiveTarget === '_self') &&
+      event.button === 0
+    ) {
+      event.preventDefault()
+
+      this.isTransitioning.set(true)
+
+      const unsub = this.router.subscribe('onResolved', () => {
+        unsub()
+        this.isTransitioning.set(false)
+      })
+
+      this.router.navigate(this._options())
+    }
+  }
+
+  protected handleFocus = () => {
+    if (this._options().disabled) return
+    if (this.preload()) {
+      this.doPreload()
+    }
+  }
+
+  protected handleTouchStart = () => {
+    if (this._options().disabled) return
+    if (this.preload()) {
+      this.doPreload()
+    }
+  }
+
+  protected handleEnter = (event: MouseEvent) => {
+    if (this._options().disabled) return
+    const eventTarget = (event.currentTarget || {}) as EventTargetWithPreloadTimeout
+
+    if (this.preload()) {
+      if (eventTarget.preloadTimeout) {
+        return
+      }
+
+      eventTarget.preloadTimeout = setTimeout(() => {
+        eventTarget.preloadTimeout = null
+        this.doPreload()
+      }, this.preloadDelay())
+    }
+  }
+
+  protected handleLeave = (event: MouseEvent) => {
+    if (this._options().disabled) return
+    const eventTarget = (event.currentTarget || {}) as EventTargetWithPreloadTimeout
+
+    if (eventTarget.preloadTimeout) {
+      clearTimeout(eventTarget.preloadTimeout)
+      eventTarget.preloadTimeout = null
+    }
+  }
+}
+
+interface ActiveLinkProps {
+  class?: string
+  style?: string
+}
+
+interface ActiveLinkOptionProps {
+  activeProps?: ActiveLinkProps
+  inactiveProps?: ActiveLinkProps
+}
+
+type EventTargetWithPreloadTimeout = EventTarget & {
+  preloadTimeout?: ReturnType<typeof setTimeout> | null
+}
+
+export type LinkOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
+  TTo extends string | undefined = '.',
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
+  TMaskTo extends string = '.',
+> = CoreLinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+  ActiveLinkOptionProps
+
+function isCtrlEvent(e: MouseEvent) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
+}
+
+// Angular does not provide by default passive events listeners
+// to some events like React, and does not support a pasive options
+// in the template, so we attach the pasive events manually here
+
+type PassiveEvents = {
+  touchstart: (event: TouchEvent) => void
+}
+
+function injectPasiveEvents(passiveEvents: () => PassiveEvents) {
+  const element = inject(ElementRef).nativeElement
+  const destroyRef = inject(DestroyRef)
+  const renderer = inject(Renderer2)
+  const cleanups: Array<() => void> = []
+
+  afterNextRender(() => {
+    for (const [event, handler] of Object.entries(passiveEvents())) {
+      const cleanup = renderer.listen(element, event, handler, {
+        passive: true,
+      })
+      cleanups.push(cleanup)
+    }
+  })
+
+  destroyRef.onDestroy(() => {
+    while (cleanups.length) {
+      cleanups.pop()?.()
+    }
+  })
+}