'Not all code paths return a value ' Angular

Question

I am building a small project and I am basically dealing with Adding an Angular route guard. I ran into the error 'Not all code paths return a value.' What could be wrong? I am new to development.

auth.guard.ts

     import { map } from 'rxjs/operators';
     import { AccountService } from './../_services/account.service';
     import { Injectable } from '@angular/core';
     import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from 
     '@angular/router';
     import { Observable } from 'rxjs';
     import { ToastrService } from 'ngx-toastr';

     @Injectable({
     providedIn: 'root'
     })
     export class AuthGuard implements CanActivate {
     constructor(private accountService: AccountService, private toastr: 
          ToastrService) { }

          canActivate(): Observable<boolean> {
         return this.accountService.currentUser$.pipe(
          map(user => {
           if (user) {
          return true;
           }
          this.toastr.error('Access Denied');
           }
           )
          )
        }

     }

app-routing.module.ts

    import { MemberDetailComponent } from './members/member-detail/member-detail.component';
    import { MemberListComponent } from './members/member-list/member-list.component';
    import { HomeComponent } from './home/home.component';
    import { NgModule, Component } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ListsComponent } from './lists/lists.component';
    import { MessagesComponent } from './messages/messages.component';
    import { AuthGuard } from './_guards/auth.guard';
    
    const routes: Routes = [
      {path: '', component: HomeComponent},
      {path: 'members', component: MemberListComponent, canActivate: [AuthGuard]},
      {path: 'members/:id', component: MemberDetailComponent} ,
      {path: 'lists', component: ListsComponent} ,
      {path: 'messages', component: MessagesComponent} ,
      {path: '**', component: HomeComponent, pathMatch: 'full'}  
    
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Here is a screenshot of the auth.guard.ts The app-routing.module.ts file

score 1 · Answer 1 · answered Aug 23 '21 at 13:19

1

You are missing returning false if user is not available or invalid or null or whatever like this.

if (user) {
  return true;
}
else return false; // add this line

answered Aug 23 '21 at 13:19

Salahuddin Ahmed

4,854
4
14
35

score 0 · Answer 2 · answered Aug 23 '21 at 12:38

0

There are two code paths, one for the true branch of the if and one for the false branch. The false branch doesn't return anything, hence the error.

answered Aug 23 '21 at 12:38

Aviad P.

32,036
14
103
124

score 0 · Answer 3 · answered Aug 23 '21 at 12:43

This may be because you are return value only if user exists and if user is empty then nothing is returned.

rxjs map should always return value in all case

canActivate(): Observable<boolean> {
  return this.accountService.currentUser$.pipe(
    map(user => !!user),
    tap(user => user || this.toastr.error('Access Denied'); )
  )
}

I belive this solves your issue

'Not all code paths return a value ' Angular

3 Answers3