0

I am trying to redirect new users (no authentication involved) to a country selection for using the application for the first time. I am using angular guards, and I am lazy loading. I am checking following this link: https://angularfirebase.com/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/. The problem however is, since I am lazy loading I tried to implement it as following.

app.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { TutorialGuard } from './guards/tutorial.guard';

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule', 
canActivate: [TutorialGuard]},
]

Main page, which is the parent for home and favorites page

    const routes: Routes = [
  {
    path: 'main',
    component: MainPage,
    children: [
       { path: 'home', loadChildren: '../home/home.module#HomePageModule' 
},
      { path: 'favorites', loadChildren: 
'../favorites/favorites.module#FavoritesPageModule' },
      { path: 'country-selection', loadChildren: '../country- 
   selection/country-selection.module#CountrySelectionPageModule' },

    ]
  },
  {
    path: '',
    redirectTo: '/main/home',
  }
];

tutorial.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router 
} from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class TutorialGuard implements CanActivate  {
  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {

    const isComplete = await this.storage.get('tutorialComplete');
    console.log('is storage complete?', isComplete);

    if (!isComplete) {
      this.router.navigateByUrl('main/country-selection');
    console.log('the tutorial is not complete');
    }

    return isComplete;
  }
}

After compiling, the screen turns white, and the console.log part that i mentioned in the tutorial.guard.ts runs forever.

Can you please tell me what I am doing wrong?

Don-Ricardo
  • 213
  • 4
  • 12

2 Answers2

1

I think the problem is that you set it on the default route. That means since you're not allowed to enter this route, the app is trying to lead you to the default, which is the same route, and therefore you stuck in a loop.

YaennuuH
  • 19
  • 2
0

you have mentioned the root module as mainpage module in both the places. so it was an infinite loop which turns to be a blank one. Note: Use canLoad() instead of canActivate() whenever you are using lazy loading module.

App.module.ts

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule', 
canActivate: [TutorialGuard]},
]

MainPage:

  {
    path: '',
    redirectTo: '/main/home',
  }
arvind AK
  • 31
  • 4
  • you dont need to define constant route in app.module.ts. on the imports add the following RouterModule.forRoot(TutorialGuard,{ useHash: true }) – arvind AK Aug 29 '19 at 17:46