I have app walkthrough / intro built using ion-slides which is loaded as the default page in app.routing.module.ts .
{
path: '',
redirectTo: 'walkthrough',
pathMatch: 'full'
},{
path: 'walkthrough',
loadChildren: () => import('./walkthrough/walkthrough.module').then(m => m.WalkthroughPageModule)
}
I only want to show this the first time the app is launched, so my question is how do I configure the app-route in the app-routing module to set the opening page just once? I read the documentation and could not find a reference.
For anyone in a similar situation you can add conditionals / user logic using angular route gaurds. In the Walkthrough.ts module I set the value to storage:
ngOnInit(): void {
// save key to mark the walkthrough as visited so the next time the user vistis the app, he would be redirected to log in
Storage.set({
key: 'visitedWalkthrough',
value: 'true'
});
}
In a walkthrough.gaurd.ts I check for same value and change the route based on same:
const { Storage } = Plugins;
@Injectable()
export class WalkthroughGuard implements CanActivate {
constructor(private router: Router) {}
async canActivate(): Promise<boolean> {
const { value } = await Storage.get({ key: 'visitedWalkthrough' });
if (value === 'true') {
// this is a returning user, don't show him the walkthrough
this.router.navigate(['auth']);
return false;
} else return true;
}
}
Good tutorial here :