Depois de associar o Guard no app-routing.module.ts
e acessar a URL /animais
não estando logado, estou tendo o seguindo erro:
ERROR Error: Uncaught (in promise): Error: Invalid CanLoad guard
tyNb/runCanLoadGuards/canLoadObservables<@http://localhost:4200/vendor.js:66618:23
runCanLoadGuards@http://localhost:4200/vendor.js:66608:44
getChildConfig@http://localhost:4200/vendor.js:66590:25
matchSegmentAgainstRoute@http://localhost:4200/vendor.js:66561:35
expandSegmentAgainstRoute@http://localhost:4200/vendor.js:66510:25
tyNb/expandSegment/<@http://localhost:4200/vendor.js:66488:36
_tryNext@http://localhost:4200/vendor.js:2012:27
_next@http://localhost:4200/vendor.js:2002:18
next@http://localhost:4200/vendor.js:2560:18
ngJS/subscribeToArray/<@http://localhost:4200/vendor.js:53930:20
_trySubscribe@http://localhost:4200/vendor.js:5239:25
subscribe@http://localhost:4200/vendor.js:5225:22
call@http://localhost:4200/vendor.js:1987:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:59774:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:5702:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:8698:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:5751:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:47574:23
subscribe@http://localhost:4200/vendor.js:5220:31
innerSubscribe@http://localhost:4200/vendor.js:70841:23
_innerSub@http://localhost:4200/vendor.js:2025:105
_tryNext@http://localhost:4200/vendor.js:2019:14
_next@http://localhost:4200/vendor.js:2002:18
next@http://localhost:4200/vendor.js:2560:18
ngJS/subscribeToArray/<@http://localhost:4200/vendor.js:53930:20
_trySubscribe@http://localhost:4200/vendor.js:5239:25
subscribe@http://localhost:4200/vendor.js:5225:22
call@http://localhost:4200/vendor.js:1987:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:5948:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:3079:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:8698:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:47574:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:47574:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:5751:23
subscribe@http://localhost:4200/vendor.js:5220:31
call@http://localhost:4200/vendor.js:47574:23
subscribe@http://localhost:4200/vendor.js:5220:31
innerSubscribe@http://localhost:4200/vendor.js:70841:23
_innerSub@http://localhost:4200/vendor.js:10540:104
_next@http://localhost:4200/vendor.js:10530:14
next@http://localhost:4200/vendor.js:2560:18
notifyNext@http://localhost:4200/vendor.js:10562:26
_next@http://localhost:4200/vendor.js:70784:21
next@http://localhost:4200/vendor.js:2560:18
a7t3/subscribeToPromise/</<@http://localhost:4200/vendor.js:9812:24
invoke@http://localhost:4200/polyfills.js:460:30
onInvoke@http://localhost:4200/vendor.js:39677:33
invoke@http://localhost:4200/polyfills.js:459:36
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AutenticacaoGuard } from './autenticacao/autenticacao.guard';
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{
path: 'home',
loadChildren: () =>
import('./home/home.module').then((module) => module.HomeModule),
},
{
path: 'animais',
loadChildren: () =>
import('./animais/animais.module').then((module) => module.AnimaisModule),
canLoad: [AutenticacaoGuard],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
autenticacao.guard.ts
import { Injectable } from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
Router,
RouterStateSnapshot,
UrlTree,
} from '@angular/router';
import { Observable } from 'rxjs';
import { UsuarioService } from './usuario/usuario.service';
@Injectable({
providedIn: 'root',
})
export class AutenticacaoGuard implements CanActivate {
constructor(private usuarioService: UsuarioService, private router: Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
):
| Observable<boolean | UrlTree>
| Promise<boolean | UrlTree>
| boolean
| UrlTree {
if (this.usuarioService.estaLogado()) {
return true;
}
this.router.navigate(['']);
return false;
}
}