How to use router navigation in a service for resolvers in Angular 6?

Question

I'm using the following ErrorHandleService which is called everytime an error in any service occures.

handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {

  const errorBody = error.json();

  const userMessage = this.getUserMessage(errorBody.error);
  if (error.status === 403 || error.status === 404) {
    this.router.navigate(['error']);
  } else {
    if (userMessage === 'Es ist leider ein Fehler aufgetreten, bitte versuchen Sie es erneut') {
      this.logError(operation, errorBody.error).subscribe();
      console.log('An error has occured: ' + operation + ' (' + error.status + ')');
    }
    return throwError(userMessage);
  }
};

For some components I have implemented resolvers. The problem is:

If a HTTP error (403 or 404) occurs while accessing a route with a resolver, this.router.navigate['error'] doesn't work (there is shown only the empty page). Otherwise - without resolvers - everthing works and the user is forwareded to the error component if an 403 or 404 error occurs.

Could anyone help me to solve this problem?

EDIT:

My resolvers simply look like that:

@Injectable()
export class GetStaffsResolver implements Resolve<Array<Staff>> {

  constructor(private ss: StaffService) { }

  resolve(activatedRoute: ActivatedRouteSnapshot) {
    return this.ss.getStaffs(activatedRoute.queryParams['branch']);
  }
}

Answer 1

Router.navigate is a method, not an array. Try calling it with

this.router.navigateByUrl('error');

instead of this.router.navigate['error'] .