In previous versions of ionic I am used to using the tabs in the root but I see all the new examples change this where it has its own modules and child routes. I am running V4 of ionic.
-
I want to know if new pages should be declared in a single routing page or should they be in separate routing files(one inherited by the app.module and one by the tabs.module)
-
I am trying to run a route guard on my routes using Angularfire (not angularfireauthguard) but I keep getting a nullinjector error for the Angular auth service.
- I have tried importing the auth module into both the tab and the root but that doesnt work.
- I think it has something to do with the fact that the the tabs are trying to navigate to a route not declared in teh tab routing.
its a standard auth guard that accesses the Agularfire service.
Below is a code snippet of the auth guard.
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): Observable<boolean> | Promise<boolean> | boolean {
return this.afauth.authState.pipe(
map((user: firebase.User) => {
if (user.isAnonymous || user === null) {
this.presentToast('You need to be logged in to access this feature.');
this.router.navigateByUrl('/signin');
return false;
} else {
console.log(next.url);
/**if (next.url === 'signin' || next.url === 'signun') {
this.presentToast('You are already authenticated.');
this.router.navigateByUrl('/tabs/scan');
return false;
}**/
return true;
}
}),
);
}
Below is a snippet of my tabs
path: 'tabs',
component: TabsPage,
children: [
{
path: 'account',
children: [
{
path: '',
loadChildren: '../pages/account/account.module#AccountPageModule',
canActivate: [AuthGuard],
},
],
},
Snippet of my app.routing
{
path: 'detail-account',
loadChildren: './pages/detail-account/detail-account.module#DetailAccountPageModule',
canActivate: [AuthGuard],
},