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