3. Ons Tabbar and Angular AuthGuard creates error.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Ons Tabbar and Angular AuthGuard creates error.


  • Framework
    Angular 6
    Issue
    When I use Onsenui Tabbar Directive ie without using angular AuthGuard, it works fine.
    but when i use AuthGuard on component or say “canActivateChild: [AuthGuard]”, it shows this error everytime i click on one of the tab that has AuthGuard on it.

    ERROR Error: Uncaught (in promise): TypeError: page._show is not a function
TypeError: page._show is not a function at HTMLElement._onPostChange (onsenui.js:30227) at onsenui.js:15293 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke 
(core.js:3820) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask
(core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at HTMLElement._onPostChange 
(onsenui.js:30227) at onsenui.js:15293 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:3820) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at resolvePromise (zone.js:814) at zone.js:724 at zone.js:740 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:3820) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3811)

    and then again clicking on previous tab (initial-tab) , it gives these errors.

    ERROR Error: Uncaught (in promise): TypeError: prevTab.pageElement._hide is not a function 
TypeError: prevTab.pageElement._hide is not a function at HTMLElement._onPreChange 
(onsenui.js:30250) at Swiper._changeTo 
(onsenui.js:15285) at Swiper.setActiveIndex 
(onsenui.js:15104) at onsenui.js:30423 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke 
(zone.js:388) at Object.onInvoke 
(core.js:3820) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke 
(zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run 
(zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask 
(zone.js:421) at HTMLElement._onPreChange
(onsenui.js:30250) at Swiper._changeTo 
(onsenui.js:15285) at Swiper.setActiveIndex 
(onsenui.js:15104) at onsenui.js:30423 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke 
(core.js:3820) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask 
(zone.js:421) at resolvePromise 
(zone.js:814) at zone.js:877 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask 
(core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask 
(zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask 
(zone.js:188) at drainMicroTaskQueue 
(zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] 
(zone.js:500) at invokeTask 
(zone.js:1540) at HTMLElement.globalZoneAwareCallback (zone.js:1566)

    How to reproduce

    adding this AuthGuard file produces error.

    import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
Router,
CanActivateChild
} from '@angular/router';
import { Observable } from 'rxjs';
import { map, take, tap } from 'rxjs/operators';
import { AngularFireAuth } from '@angular/fire/auth';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})`
export class AuthGuard implements CanActivate, CanActivateChild {

constructor(
private auth: AuthService,
private router: Router ) { }
canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable | Promise {
console.log('inside authguard')
return this.auth.user.pipe(
take(1),
map(user => !!user),
tap(loggedIn => {
if (!loggedIn) {
console.log('access denied:you must be logged in');
this.router.navigate(['/login']);
}
})
);
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable | Promise | boolean {
return this.auth.user.pipe(
take(1),
map(user => !!user),
tap(loggedIn => {
if (!loggedIn) {
console.log('access denied');
this.router.navigate(['/login']);
}
})
);
}
}
    0