Ons Tabbar and Angular AuthGuard creates error.

hilalkaldane

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