Angular: Displaying target URL when resolve fails

Question

I have a simple resolver for a route like /orders/first:

resolve(): Promise<Order> {
    return this.orderService.get()
        .then((response) => response.order)
        .catch(error => Promise.reject(error));
}

I also have an error handler that redirects to an error page:

this.router.navigate(['/error'], { skipLocationChange: true });

I want the URL to be /orders/first so if the user refresh he might be able to view the page. This also make back button return to an incorrect page (previous previous page)

The problem is that the resolver runs before route activation so the URL doesn't change.

Is there a way to do this?

EDIT: Found this workaround:

Listen to router event NavigationStart and save route to a variable
Set location URL before redirecting to error page: this.location.go(nextRoute.url);
Redirect with skipLocationChange set to true

Hi Tzach. Can you provide a sample/gist with your implementation? I need to have the same behaviour in an app that you described. — Christian Benseler
– Christian Benseler, Commented Jan 31, 2018 at 12:49

Christian Benseler · Accepted Answer · 2018-01-31 13:22:25Z

2

I have achieved this this way:

resolve(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<any>|Promise<any>|any {
  return this.clientService.get(route.params.id)
  .catch( err => {
    const path = this.location.path();
    this.router.navigate(["/" + err.status], {  skipLocationChange: true })
    .then( () => {
      this.location.replaceState(path);
    });

    return Observable.empty();
  })
}

answered Jan 31, 2018 at 13:22

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tzach Ovadia · Accepted Answer · 2018-02-02 10:09:46Z

import { Injectable } from '@angular/core';
import { Router, NavigationError, NavigationExtras } from '@angular/router';
import { Location } from '@angular/common';

@Injectable()
export class RouterService {

    private errorRoot: string;

    constructor(
        private router: Router,
        private location: Location
    ) { }

    setRouteErrorHandler(errorRoot: string = '/error'): void {
        let errorRoute = null;
        this.errorRoot = errorRoot;
        this.router.errorHandler = (error): void => {
            this.router.navigateByUrl(errorRoot, { skipLocationChange: true })
                .then(() => this.location.go(errorRoute.url));
        };

        this.router.events
            .filter(next => next instanceof NavigationError)
            .subscribe((next) => errorRoute = next);
    }
}

And call routerService.setRouteErrorHandler() from AppModule constructor or APP_INITIALIZER

Collectives™ on Stack Overflow

Angular: Displaying target URL when resolve fails

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related