{{ loaderData() | json }}
15 | `,
16 | changeDetection: ChangeDetectionStrategy.OnPush,
17 | imports: [JsonPipe],
18 | })
19 | export class LazyPage {
20 | loaderData = Route.loaderData();
21 | }
22 |
--------------------------------------------------------------------------------
/projects/file-routing/src/routes/lazy-foo.ts:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from 'tanstack-angular-router-experimental';
2 |
3 | export const Route = createFileRoute('/lazy-foo')({
4 | loader: async () => {
5 | const json = await fetch(
6 | 'https://jsonplaceholder.typicode.com/todos/1'
7 | ).then((response) => response.json());
8 | return json as { id: number; title: string; completed: boolean };
9 | },
10 | });
11 |
--------------------------------------------------------------------------------
/projects/file-routing/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/projects/file-routing/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/app",
7 | "types": []
8 | },
9 | "files": ["src/main.ts"],
10 | "include": ["src/**/*.d.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/projects/file-routing/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/projects/router-devtools/README.md:
--------------------------------------------------------------------------------
1 | # Tanstack Router for Angular
2 |
3 | This is an **experimental** release of the TanStack Router for Angular.
4 |
5 | ## Setup
6 |
7 | ```sh
8 | npm install tanstack-angular-router-experimental
9 | ```
10 |
--------------------------------------------------------------------------------
/projects/router-devtools/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../dist/router-devtools",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | },
7 | "allowedNonPeerDependencies": [
8 | "@tanstack/router-devtools-core",
9 | "solid-js"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/projects/router-devtools/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tanstack-angular-router-devtools-experimental",
3 | "version": "0.0.40",
4 | "dependencies": {
5 | "@tanstack/router-devtools-core": "^1.114.29",
6 | "solid-js": "^1.9.5",
7 | "tslib": "^2.3.0"
8 | },
9 | "peerDependencies": {
10 | "@angular/core": "^19.0.0",
11 | "@angular/router": "^19.0.0",
12 | "tanstack-angular-router-experimental": "^0.0.39"
13 | },
14 | "sideEffects": false
15 | }
16 |
--------------------------------------------------------------------------------
/projects/router-devtools/src/lib/router-devtools.ts:
--------------------------------------------------------------------------------
1 | import {
2 | afterNextRender,
3 | booleanAttribute,
4 | computed,
5 | Directive,
6 | effect,
7 | ElementRef,
8 | inject,
9 | Injector,
10 | input,
11 | NgZone,
12 | signal,
13 | untracked,
14 | } from '@angular/core';
15 | import { injectStore } from '@tanstack/angular-store';
16 | import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core';
17 | import { injectRouter } from 'tanstack-angular-router-experimental';
18 |
19 | @Directive({
20 | selector: 'router-devtools,RouterDevtools',
21 | host: { style: 'display: block;' },
22 | })
23 | export class RouterDevtools {
24 | private injectedRouter = injectRouter();
25 | private host = inject
27 | @if (context.error.message; as message) {
28 | {{ message }}
29 | }
30 |
31 | Page not found
7 | `, 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | host: { style: 'display: contents;' }, 10 | }) 11 | export class DefaultNotFound {} 12 | -------------------------------------------------------------------------------- /projects/router/src/lib/distinct-until-ref-changed.ts: -------------------------------------------------------------------------------- 1 | import { distinctUntilChanged } from 'rxjs'; 2 | 3 | export function distinctUntilRefChangedPage not found
)` 233 | ); 234 | } 235 | notFoundCmp = DefaultNotFound; 236 | } 237 | } else { 238 | notFoundCmp = route.options.notFoundComponent?.(); 239 | } 240 | 241 | if (!notFoundCmp) return of(null); 242 | 243 | const injector = this.router.getRouteInjector( 244 | route.id + '-not-found', 245 | this.injector, 246 | [{ provide: NOT_FOUND_COMPONENT_CONTEXT, useValue: {} }] 247 | ); 248 | return of({ 249 | component: notFoundCmp, 250 | injector, 251 | environmentInjector: null, 252 | clearView: true, 253 | } as const); 254 | } 255 | 256 | if (match.status === 'redirected' || match.status === 'pending') { 257 | if (match.status === 'redirected') { 258 | invariant(isRedirect(match.error), 'Expected a redirect error'); 259 | } 260 | 261 | return this.matchLoad$.pipe( 262 | withLatestFrom(this.pendingComponent$), 263 | switchMap(([, pendingComponent]) => { 264 | const pendingCmp = pendingComponent?.(); 265 | if (!pendingCmp) return of(null); 266 | return of({ 267 | component: pendingCmp, 268 | injector: null, 269 | environmentInjector: null, 270 | clearView: true, 271 | } as const); 272 | }) 273 | ); 274 | } 275 | 276 | if (match.status === 'error') { 277 | return of(null).pipe( 278 | withLatestFrom(this.errorComponent$), 279 | switchMap(([, errorComponent]) => { 280 | const errorCmp = errorComponent?.() || DefaultError; 281 | const injector = this.router.getRouteInjector( 282 | route.id + '-error', 283 | this.injector, 284 | [ 285 | { 286 | provide: ERROR_COMPONENT_CONTEXT, 287 | useValue: { 288 | error: match.error, 289 | info: { componentStack: '' }, 290 | reset: () => void this.router.invalidate(), 291 | }, 292 | }, 293 | ] 294 | ); 295 | return of({ 296 | component: errorCmp, 297 | injector, 298 | environmentInjector: null, 299 | clearView: true, 300 | } as const); 301 | }) 302 | ); 303 | } 304 | 305 | if (match.status === 'success') { 306 | const successComponent = route.options.component?.() || Outlet; 307 | 308 | if (this.cmp === successComponent) { 309 | this.cmpRef?.changeDetectorRef.markForCheck(); 310 | return of({ clearView: false } as const); 311 | } 312 | 313 | this.cmpRef = undefined; 314 | this.cmp = successComponent; 315 | const injector = this.router.getRouteInjector( 316 | route.id, 317 | this.injector 318 | ); 319 | const environmentInjector = this.router.getRouteEnvInjector( 320 | route.id, 321 | this.environmentInjector, 322 | route.options.providers || [], 323 | this.router 324 | ); 325 | 326 | return of({ 327 | component: successComponent, 328 | injector: Injector.create({ 329 | providers: [ 330 | { provide: MATCH_ID, useValue: match.id }, 331 | { 332 | provide: MATCH_IDS, 333 | useValue: [match.id, this.matchId(), route.id], 334 | }, 335 | ], 336 | parent: injector, 337 | }), 338 | environmentInjector, 339 | clearView: true, 340 | } as const); 341 | } 342 | 343 | return of(null); 344 | }) 345 | ); 346 | }), 347 | catchError((error) => 348 | of(null).pipe( 349 | withLatestFrom(this.onCatch$), 350 | switchMap(([, onCatch]) => throwError(() => [error, onCatch])) 351 | ) 352 | ) 353 | ); 354 | 355 | private cmp?: TypePage not found
)` 477 | ); 478 | } 479 | notFoundCmp = DefaultNotFound; 480 | } 481 | } else { 482 | notFoundCmp = route.options.notFoundComponent?.(); 483 | } 484 | 485 | if (!notFoundCmp) return null; 486 | 487 | const injector = this.router.getRouteInjector( 488 | route.id + '-not-found', 489 | this.vcr.injector, 490 | [{ provide: NOT_FOUND_COMPONENT_CONTEXT, useValue: {} }] 491 | ); 492 | return { 493 | component: notFoundCmp, 494 | injector, 495 | clearView: true, 496 | childMatchId: null, 497 | } as const; 498 | }) 499 | ); 500 | } 501 | 502 | if (!childMatchId) return of(null); 503 | 504 | if (this.renderedId === childMatchId) { 505 | return of({ clearView: false } as const); 506 | } 507 | 508 | this.cmpRef = undefined; 509 | 510 | if (childMatchId === rootRouteId) { 511 | return this.matchLoad$.pipe( 512 | map(() => { 513 | return { 514 | component: this.defaultPendingComponent, 515 | injector: null, 516 | clearView: true, 517 | childMatchId: null, 518 | } as const; 519 | }) 520 | ); 521 | } 522 | 523 | this.renderedId = childMatchId; 524 | return of({ 525 | component: RouteMatch, 526 | injector: null, 527 | clearView: true, 528 | childMatchId, 529 | } as const); 530 | }), 531 | catchError((error) => throwError(() => error)) 532 | ); 533 | 534 | constructor() { 535 | let subscription: Subscription; 536 | afterNextRender(() => { 537 | subscription = this.run$.subscribe({ 538 | next: (runData) => { 539 | if (!runData) return; 540 | if (!runData.clearView) { 541 | this.cmpRef?.changeDetectorRef.markForCheck(); 542 | return; 543 | } 544 | const { component, injector, childMatchId } = runData; 545 | this.vcr.clear(); 546 | if (!component) return; 547 | this.cmpRef = this.vcr.createComponent(component, { 548 | injector: injector || undefined, 549 | }); 550 | if (childMatchId) { 551 | this.cmpRef.setInput('matchId', childMatchId); 552 | } 553 | this.cmpRef.changeDetectorRef.markForCheck(); 554 | }, 555 | error: (error) => { 556 | console.error(error); 557 | }, 558 | }); 559 | }); 560 | 561 | inject(DestroyRef).onDestroy(() => { 562 | subscription?.unsubscribe(); 563 | this.vcr.clear(); 564 | this.cmpRef = undefined; 565 | this.renderedId = undefined; 566 | }); 567 | } 568 | } 569 | -------------------------------------------------------------------------------- /projects/router/src/lib/params.ts: -------------------------------------------------------------------------------- 1 | import { 2 | assertInInjectionContext, 3 | inject, 4 | Injector, 5 | runInInjectionContext, 6 | Signal, 7 | } from '@angular/core'; 8 | import { toSignal } from '@angular/core/rxjs-interop'; 9 | import { 10 | AnyRouter, 11 | RegisteredRouter, 12 | ResolveUseParams, 13 | StrictOrFrom, 14 | ThrowConstraint, 15 | ThrowOrOptional, 16 | UseParamsResult, 17 | } from '@tanstack/router-core'; 18 | import { Observable } from 'rxjs'; 19 | import { match$ } from './match'; 20 | 21 | export interface ParamsBaseOptions< 22 | TRouter extends AnyRouter, 23 | TFrom, 24 | TStrict extends boolean, 25 | TThrow extends boolean, 26 | TSelected, 27 | > { 28 | select?: (params: ResolveUseParams