Monaca Onsen UI Discord Chat Github Repo

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']);
    }
    })
    );
    }
    }