Redirect if Resolve fails Angular 2

Question

How Can I redirect to another page if the resolve fails in Angular 2? I call this resolve for my Edit Page, but I want to handle the errors in the Resolve Page

My Resolve:

 resolve(route: ActivatedRouteSnapshot): Promise<any>|boolean {

        return new Promise((resolve, reject) => {

            if (route.params['id'] !== undefined) {
                this.dataService.getHttpEmpresaShow(this.endpoint_url_Get + route.params['id'])
                    .subscribe(
                     result => {                    
                            console.log("ok");
                            return resolve(result);                     
                    },
                    error => {
                return resolve(error);
            });
    }});

Related Github issue : github.com/angular/angular/issues/29089 - asking for parity with the equivalent feature new for Authguards in Angular 7.1 (blog.ninja-squad.com/2018/11/22/what-is-new-angular-7.1) — Simon_Weaver
– Simon_Weaver, Commented Mar 4, 2019 at 5:03

Simon_Weaver · Accepted Answer · 2019-03-03 06:20:25Z

40

Just like in the docs, calling this.router.navigate(["url"])... (think to inject Router in your constructor)

class MyResolve {

  constructor(private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable <any> {
    return this.dataService.getHttpEmpresaShow(this.endpoint_url_Get + route.params['id'])
      .pipe(catchError(err => {
        this.router.navigate(["/404"]);
        return EMPTY;
      }));
  }
}

edited Mar 3, 2019 at 6:20

Simon_Weaver

147k92 gold badges688 silver badges724 bronze badges

answered Mar 29, 2017 at 14:59

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

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

13 Comments

Alireza Mirian Over a year ago

It's really not convenient to have a /404 route! Ideally, we should be able to keep the original url (e.g. posts/some-missing-id) and show an error component instead of original handler component. Is there any way to implement such mechanism to (globally) handle errors in resolve guards?

n00dl3 Over a year ago

It's really convenient to have a 404 route ! Instead of having spaghetti code with ngIf="error" it is centralized. If you want to keep the url take a look at the router documentation and NavigationExtras

Reactgular Over a year ago

This is a bad practise. I've never seen a backend web server ever redirect to a dedicated 404 webpage. So why do this on the frontend?

n00dl3 Over a year ago

I think you don't understand what is done here. If you have a router outlet that is made to display a single item, and when you don't find the item, you display a 404 message in the same place without changing the url. That's the exact behavior you talked about ! You just need to pass {skipLocationChang:true} as an option to router.navigate(url, options). @cgTag

Vladimir Tolstikov Over a year ago

@n00dl3, did you try it yourself? skipLocationChang:true is not working in case of data resolver I dunno why. If the URL which you visit is first URL and resolved can't resolve data and redirects to 404, original URL not saved and always become just "/" root URL without path, this.router.navigate(['404'], {skipLocationChange: true}); doesn't help. Angular 4. Not sure if that's a bug of router or it's a feature...

|

Nicolas V · Accepted Answer · 2019-05-16 09:20:25Z

1

Another solution, if you want to apply a redirect strategy after failling for ALL of your resolvers, you can intercept a router event and apply redirect on a fail event. Here the code you can add in your AppComponent :

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router, RouterEvent, NavigationError } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(
    private router: Router,
    private cdr: ChangeDetectorRef
  ){}


  ngOnInit() {    
    this.router.events.subscribe((event: RouterEvent) => {
      this.navigationInterceptor(event)
    });
  }

  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationError) {
      this.router.navigate(["error"],{ queryParams: { redirect: event.url } });
    }
    this.cdr.detectChanges();
  }

}

answered May 16, 2019 at 9:20

Nicolas V

2122 silver badges6 bronze badges

1 Comment

Captain Prinny Over a year ago

The problem with this is that if you have nested component routes that you want to direct to, you need to now the entire path to the result, where as a redirectTo in place takes the route you want, and is defined at the path level

Collectives™ on Stack Overflow

Redirect if Resolve fails Angular 2

2 Answers 2

13 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related