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?