Route resolver angular check if data is empty

Question

I have a resolver like this:

export class TaskResolver implements Resolve<Documents> {

  constructor(private taskService: TaskService) { }

  resolve(route: ActivatedRouteSnapshot): Observable<Documents> {
    const taskId = route.params.taskId;
    return this.taskService.DocumentsTask(taskId);
  }
}

And inside my component I have:

this.route.data.subscribe((data: { documents: Documents }) => {
     if (data.documents) {
    this.documents = data.documents;
  } else {
    this.router.navigate([`/error/404`]);
  }
});

I need to move the this.router.navigate([/error/404]); inside resolver, that way the resolver will check if the data is empty and redirect to error, and not the component. Or maybe move to auth guard that looks like this

canActivate(route: ActivatedRouteSnapshot): boolean {
    const taskId = route.params.taskId;
    if (taskId) {
      return true;
    }
  }

DocumentsTask(taskId) returns Observable

Auth guard is the right place to redirect to 404 pages, instead of the resolver. — user2216584, Jun 28 '19 at 16:46
Other community members have already answered..:) Hope it solves your issue. — user2216584, Jun 28 '19 at 16:55

Darren Ruane · Answer 1 · 2019-06-28T22:42:53.877

0

The CanActivate Guard can return Observable<boolean | UrlTree> as of version 7.1.0 of Angular. This allows for the guard to evaluate a boolean and return a route redirect if it evaluates to false.

I wrote an answer a few days ago which goes over the implementation details but here's how I would approach it in your case:

First, create the guard:

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
// import your TaskService here

@Injectable()
export class RequireDocumentsGuard implements CanActivate {
  constructor(private router: Router, private taskService: TaskService) {
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
    return this.taskService.DocumentsTask(route.params.taskId).pipe(
      catchError(() => of(false)),
      map(documents => !!documents || this.router.parseUrl('error/404'))
    );
  }
}

Then simply add the guard to your route in your RoutingModule:

{ 
  path: 'your/desired/route/:taskId', 
  component: YourComponentHere,
  canActivate: [RequireDocumentsGuard ]
}

Note: You have not posted your route structure so I will also make the point that you need to ensure that your 'error/404' route actually exists like:

{ 
  path: 'error/404', 
  component: Your404ErrorComponent
}

Hope that helps!

edited Jun 28 '19 at 22:42

answered Jun 28 '19 at 16:53

Darren Ruane

2,385
1
8
17

core.js:15724 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence – Miomir Dancevic Jun 28 '19 at 17:00
What version of Angular and RXJS are you using? This error is [known](https://stackoverflow.com/questions/41131476/emptyerror-no-elements-in-sequence) to come up with a version mismatch. – Darren Ruane Jun 28 '19 at 17:03
"rxjs": "^6.5.2", – Miomir Dancevic Jun 28 '19 at 17:04
And your Angular version is? – Darren Ruane Jun 28 '19 at 17:04
Oh wait, I know what your problem is I think. Did you change the `'insert-absolute-redirect-url-here'` to a valid route? I put that in there as a template because I do not know your route structure. – Darren Ruane Jun 28 '19 at 17:05
Can you add your `routes` to your post and also show how you placed a route in the `UrlTree` return of the guard? Cos this should just work. Also what is the return type of `taskService.DocumentsTask()`? – Darren Ruane Jun 28 '19 at 17:14
Also routes is the same you posted – Miomir Dancevic Jun 28 '19 at 17:18
Sorry I don't understand what that means. Can you clarify? – Darren Ruane Jun 28 '19 at 17:21
All is ok, with routes, and made as you suggested – Miomir Dancevic Jun 28 '19 at 17:31
My suggestions were just templates though. I'm asking you if you have replaced the templates with **your specific** route configuration? – Darren Ruane Jun 28 '19 at 17:51
map(documents => !!documents || this.router.parseUrl('/error/404'))); – Miomir Dancevic Jun 28 '19 at 17:53
Can you try removing the first slash so it's just `'error/404'`? – Darren Ruane Jun 28 '19 at 18:05
Okay well everything looks okay in the code I posted. The only other thing that could be causing the problem that I can think of would be your actual route definition. Could you show me how you have defined the `'error/404'` route please? – Darren Ruane Jun 28 '19 at 18:11

score -1 · Answer 2 · answered Jun 28 '19 at 16:53

use Auth Guard like this:

ng generate guard auth  

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import {Router} from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
    private myRoute: Router){
  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    const taskId = next.params.taskId;
    if (taskId) {
      return true;
    }else{
      this.myRoute.navigate(["/error/404"]);
      return false;
    }
  }
}

You just check if there is params, i need to check is documents is empty?? — Miomir Dancevic, Jun 28 '19 at 16:59

Route resolver angular check if data is empty

2 Answers2