From f0372d8a9c5b15e9cde538c94a29a82b0f900dfc Mon Sep 17 00:00:00 2001 From: masumulu28 Date: Mon, 1 Apr 2024 03:12:10 +0300 Subject: [PATCH 1/2] add: lastNavigation prop to router-events.service update: http-err-wrapper.component --- .../src/lib/services/router-events.service.ts | 33 +++++++++++++++---- .../http-error-wrapper.component.ts | 9 +++++ 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts b/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts index 5e2db89899..d93ed10673 100644 --- a/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts @@ -1,4 +1,4 @@ -import { Injectable, Type } from '@angular/core'; +import { Injectable, Type, inject, signal } from '@angular/core'; import { NavigationCancel, NavigationEnd, @@ -6,7 +6,8 @@ import { NavigationStart, Router, RouterEvent, - Event + Event, + RouterState, } from '@angular/router'; import { filter } from 'rxjs/operators'; @@ -19,12 +20,32 @@ export const NavigationEvent = { @Injectable({ providedIn: 'root' }) export class RouterEvents { - constructor(private router: Router) {} + protected readonly router = inject(Router); - getEvents(...eventTypes: T) { + readonly #lastNavigation = signal(undefined); + lastNavigation = this.#lastNavigation.asReadonly(); + + constructor() { + this.listenToNavigation(); + } + + protected listenToNavigation(): void { + this.router.events.pipe(filter(e => e instanceof NavigationEvent.End)).subscribe(() => { + // It must be "NavigationTransition" but it is not exported in Angular + //https://github.com/angular/angular/blob/9c486c96827a9282cbdbff176761bc95554a260b/packages/router/src/navigation_transition.ts#L282 + const lastNavigation = this.router.lastSuccessfulNavigation as unknown as any; + const curr = lastNavigation.targetRouterState as RouterState; + const currUrl = curr.snapshot.url; - const filterRouterEvents = (event: Event) => - eventTypes.some(type => event instanceof type); + //Todo: improve this logic. Maybe we can handle error status in a better way ? + if (!currUrl.includes('error')) { + this.#lastNavigation.set(currUrl); + } + }); + } + + getEvents(...eventTypes: T) { + const filterRouterEvents = (event: Event) => eventTypes.some(type => event instanceof type); return this.router.events.pipe(filter(filterRouterEvents)); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts index 83002a3a88..9f2c24915d 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts @@ -72,6 +72,15 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr }); customComponentRef.instance.errorStatus = this.status; + + //In our custom "HttpErrorComponent", we have a "status" property. + //We used to have "errorStatus", but it wasn't signal type. "status" variable is signal type. + //I've checked because of backward compatibility. Developers might have their own custom HttpErrorComponent. + //We need to deprecated and remove "errorStatus" in the future. + if (customComponentRef.instance.status) { + customComponentRef.instance.status.set(this.status); + } + customComponentRef.instance.destroy$ = this.destroy$; this.appRef.attachView(customComponentRef.hostView); From b18d29bd2a2facf95b99407a1b9800088e48505e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C3=87=C4=B1rak?= Date: Mon, 1 Apr 2024 10:43:55 +0300 Subject: [PATCH 2/2] Refactor RouterEvents service to track previous and current navigation --- .../src/lib/services/router-events.service.ts | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts b/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts index d93ed10673..f41dc9bf5e 100644 --- a/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/router-events.service.ts @@ -9,6 +9,7 @@ import { Event, RouterState, } from '@angular/router'; +import { Observable } from 'rxjs'; import { filter } from 'rxjs/operators'; export const NavigationEvent = { @@ -22,25 +23,27 @@ export const NavigationEvent = { export class RouterEvents { protected readonly router = inject(Router); - readonly #lastNavigation = signal(undefined); - lastNavigation = this.#lastNavigation.asReadonly(); + readonly #previousNavigation = signal(undefined); + previousNavigation = this.#previousNavigation.asReadonly(); + + readonly #currentNavigation = signal(undefined); + currentNavigation = this.#currentNavigation.asReadonly(); constructor() { this.listenToNavigation(); } protected listenToNavigation(): void { - this.router.events.pipe(filter(e => e instanceof NavigationEvent.End)).subscribe(() => { + ( + this.router.events.pipe( + filter(e => e instanceof NavigationEvent.End && !e.url.includes('error')), + ) as Observable + ).subscribe(event => { // It must be "NavigationTransition" but it is not exported in Angular //https://github.com/angular/angular/blob/9c486c96827a9282cbdbff176761bc95554a260b/packages/router/src/navigation_transition.ts#L282 - const lastNavigation = this.router.lastSuccessfulNavigation as unknown as any; - const curr = lastNavigation.targetRouterState as RouterState; - const currUrl = curr.snapshot.url; - - //Todo: improve this logic. Maybe we can handle error status in a better way ? - if (!currUrl.includes('error')) { - this.#lastNavigation.set(currUrl); - } + + this.#previousNavigation.set(this.#currentNavigation()); + this.#currentNavigation.set(event.url); }); }