Partage
  • Partager sur Facebook
  • Partager sur Twitter

Erreur fonction canActivate GuardS (ANGULAR)

Sujet résolu
28 juin 2021 à 20:08:11

Bonjour a tous et a toutes,

Je suis le cours d'angular : Developpez des app webs avec Angular.

J'en suis au Routing et j'ai eu une erreur au niveau de la création de la fonction CanActivate.

La voici :

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.authService.isAuth) {
      return true;
    } else {
      this.router.navigate(['/auth']);
    }
  }
}



Ma console affiche l'erreur suivante : 

Error: src/app/services/auth.guard.service.ts:12:74 - error TS2366: Function lacks ending return statement and return type does not include 'undefined'.

12   canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean  {
                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Selon mes recherches cela est du au type de la fonction CanActivate elle doit etre du meme type que ce que la fonction retourne si j'ai bon ?

Comment je peux resoudre ce probleme.

Pres d'une demi-journée apres, j'ai pu resoudre le probleme, j'avais oublié d'inclure mon service contenant le Guard dans le Providers qui se trouve dans app.module

-
Edité par Aob 29 juin 2021 à 16:52:20

  • Partager sur Facebook
  • Partager sur Twitter
31 juillet 2021 à 11:58:43

Hello, j'ai exactement la même erreur. Pourtant j'ai bien inclut AuthGuard dans mon providers de app.module.

Une idée ? 

-
Edité par JdStibling 31 juillet 2021 à 11:59:08

  • Partager sur Facebook
  • Partager sur Twitter
31 juillet 2021 à 22:25:48

Salut !! La methode canActivate doit retourner obligatoirement un booléen, donc essaie de rajouter un return false dans le else.

À voir si ça ne modifie pas le fonctionnement. 

  • Partager sur Facebook
  • Partager sur Twitter
1 août 2021 à 14:59:51

Salut, j'ai justement essayé ça. Plus d'erreur dans le terminal mais pas le fonctionnement attendu. 

Mon auth.guard.service.ts : 

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
import { AuthService } from "./auth.service";
import { Observable } from "rxjs/Observable";
import { Injectable } from "@angular/core";

export class AuthGuard implements CanActivate{

constructor(private authService: AuthService, private router : Router) {}

    canActivate(
        route: ActivatedRouteSnapshot, 
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if(this.authService.isAuth) {
            return true;
        } else {
            this.router.navigate(['/auth'])
            return false;
        }

    }
       
        
    
}



Je ne sais pas si c'est lié mais avec un return false, si je tente d'aller sur l'URL qui me permet de voir le détail d'un seul appareil, (par exemple /1) je tombe sur ma page 404...

J'ai par contre une erreur dans la console. (Je vous l'indique dès que je retournerai sur mon pc)

Je pense que j'ai du casser quelque chose, car mon router ne fonctionne plus correctement. 

Mon erreur dans la console : 

core.js:6456 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[AuthGuard -> AuthGuard -> AuthGuard]: 
  NullInjectorError: No provider for AuthGuard!
NullInjectorError: R3InjectorError(AppModule)[AuthGuard -> AuthGuard -> AuthGuard]: 
  NullInjectorError: No provider for AuthGuard!
    at NullInjector.get (core.js:11081)
    at R3Injector.get (core.js:11247)
    at R3Injector.get (core.js:11247)
    at R3Injector.get (core.js:11247)
    at NgModuleRef$1.get (core.js:25341)
    at getToken (router.js:2987)
    at router.js:3171
    at Observable._subscribe (defer.js:8)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
    at resolvePromise (zone.js:1213)
    at resolvePromise (zone.js:1167)
    at zone.js:1279
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28661)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)



-
Edité par JdStibling 1 août 2021 à 15:34:52

  • Partager sur Facebook
  • Partager sur Twitter
1 août 2021 à 23:46:44

Essaie de mettre return false; en dehors du if de canActivate. Ca devrait fonctionner normalement.

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2022 à 21:46:55

Salutations !

Apres avoir suivi les intructions ci-dessus pour resoudre le meme probleme, j'ai maintenant cette erreur au niveau du navigateur.
Merci pour votre assistance.

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[LoginGuard -> LoginGuard -> LoginGuard]:
  NullInjectorError: No provider for LoginGuard!
NullInjectorError: R3InjectorError(AppModule)[LoginGuard -> LoginGuard -> LoginGuard]:
  NullInjectorError: No provider for LoginGuard!
    at NullInjector.get (core.mjs:11105:1)
    at R3Injector.get (core.mjs:11272:1)
    at R3Injector.get (core.mjs:11272:1)
    at R3Injector.get (core.mjs:11272:1)
    at NgModuleRef.get (core.mjs:21800:1)
    at getToken (router.mjs:3269:21)
    at router.mjs:3453:27
    at Observable._subscribe (defer.js:5:18)
    at Observable._trySubscribe (Observable.js:37:1)
    at Observable.js:31:1
    at resolvePromise (zone.js:1213:1)
    at resolvePromise (zone.js:1167:1)
    at zone.js:1279:1
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25437:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:582:1)
    at invokeTask (zone.js:491:1)
    at ZoneTask.invoke (zone.js:476:1)

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2022 à 21:51:24

@ChrisZuckerberg       Bonsoir, merci de ne pas déterrer d'ancien sujet résolu. Créer le votre en fournissant le code que vous avez écrit inséré sur le forum avec l'outil d'intégration de code soit le bouton code </>.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. 

  • Partager sur Facebook
  • Partager sur Twitter