web-dev-qa-db-fra.com

Charger conditionnellement le module sur le chemin vide dans le routeur angulaire

J'essaie de charger la page d'accueil de mon application pour les visiteurs qui ne sont pas authentifiés.

const routes: Routes = [
    { path: '', loadChildren: './home/home.module#HomeModule' }
...

Les utilisateurs authentifiés doivent obtenir leur flux via ce module, également sur le chemin vide.

{ path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] },
{ path: '', loadChildren: './home/home.module#HomeModule', canActivate: [NoAuthenticationGuard] },

Je m'attendrais à ce que IsAuthenticationGuard échoue et charge le composant d'origine par défaut.

A la place, il télécharge le paquet de module de flux (indiqué dans l'onglet réseau) mais ne charge rien dans la prise du routeur. Très perturbant. 

Comment puis-je faire un routage conditionnel (basé sur des gardes ou autrement) sur le chemin vide?

Mise à jour: Voici les gardes sur demande

@Injectable()
export class IsAuthenticationGuard implements CanActivate {
    constructor(
        private authenticationService: AuthenticationService
    ) { }

    public canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {
        return this.authenticationService.isAuthenticated.pipe(take(1), map((isAuthentication) => {
            return isAuthentication;
        }));
    }
}

J'ai fait des recherches sur la nouvelle urlTree et c'est cool que vous puissiez maintenant rediriger via la route plutôt que dans la garde. Cependant, les redirections ne semblent pas applicables si vous essayez d'utiliser le même itinéraire avec un module différent. Plz corrigez-moi s'il y a un moyen.

javascriptangularmodulerouting
7
TR3B

À mon avis, il y a quelques choses que vous faites mal.

  1. Vous ne devriez pas avoir deux itinéraires définis avec le même chemin.
  2. Dans votre garde la carte est inutile. Tant que votre méthode de service renvoie Observable<boolean>, vous n'avez pas besoin de mapper sa valeur.
  3. Toujours dans votre garde, si vous ne retournez pas true, vous devez naviguer vers le chemin de l'autre module. Pour cela, vous devrez implémenter une autre logique pour indiquer si l'utilisateur est connecté ou non.

Consultez le guide de routage angulaire officiel ici . Il y a beaucoup d'informations utiles qui vous aideront. Surtout ceux-ci:

EDIT 2018/12/27

Donc, si la question est de savoir comment charger conditionnellement deux modules de fonctions sur le même chemin,

la réponse est, selon mon expérience, vous ne pouvez pas.

3
bodorgergely

Je crois que ce que vous avez l'intention de réaliser n'est pas possible grâce aux gardes. Angular recherche le tableau de routes de haut en bas et dès qu’une correspondance de chemin est trouvée, le module/composant correspondant est chargé. Dans votre cas, { path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] } est une correspondance de chemin d’URL et donc Angular charge le module d’alimentation, mais n’affiche rien car la protection renvoie une erreur. Il ne même pas procéder à vérifier la correspondance d'URL pour la ligne ci-dessous.

Au lieu de cela, ce que vous pouvez faire est, 

  1. changer les routes en { path: '', loadChildren:'./home/home.module#HomeModule', canActivate: [IsAuthenticationGuard] },
  2. accédez au module de flux si l'utilisateur est authentifié avec succès. Suivez ce fil pour avoir plus d’indications sur la façon de procéder.

J'espère que cela résout votre objectif.

0
M M