Ionic + angular PWA freezes sometime and won't be able to navigate through pages

l have an ionic app and on browser, it works fine, but once l install the PWA on the mobile home screen, l can watch at least 2 videos over a media player then after finishing a quiz the app tabs freeze, and l won’t be able to navigate to any page.

Please check the following link with the video demonstrating the behavior.

and for the code the tabs

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomePage } from './home.page';

const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
    children: [
    {
      path: 'homepage',
       loadChildren: () => import('../pages/homepage/homepage.module').then(
        m => m.HomepagePageModule
        )
     },
    {
      path: 'search',
       loadChildren: () => import('../pages/search/search.module').then(
       m => m.SearchPageModule
       )
     },
    {
      path: 'leaderboard',
      loadChildren: () => import('../pages/leaderboard/leaderboard.module').then(
       m => m.LeaderboardPageModule
       )
     },
    {
      path: 'account',
      loadChildren: () => import('../pages/account/account.module').then(
        m => m.AccountPageModule
       )
    },
    {
       path: 'redeem',
       loadChildren: () => import('../pages/redeem/redeem.module').then(
       m => m.RedeemPageModule
       )
    },
    {
      path: 'watch/:id',
      loadChildren: () => import('../pages/watch/watch.module').then(
       m => m.WatchPageModule
       )
    },
    {
      path: 'campaign/:id',
      loadChildren: () => import('../pages/campaign/campaign.module').then(
       m => m.CampaignPageModule
      )
    },
    {
      path: 'quiz/:n/:id',
      loadChildren: () => import('../pages/quiz/quiz.module').then(
       m => m.QuizPageModule
       )
    },
    {
      path: 'course/:name',
      loadChildren: () => import('../pages/course/course.module').then(
       m => m.CoursePageModule
      )
    }
   ]
}

];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],

<ion-tab-button tab="leaderboard">
  <ion-icon name="grid"></ion-icon>
  <ion-label>Leaderboard</ion-label>
</ion-tab-button>

<ion-tab-button tab="redeem">
  <ion-icon name="basket-outline"></ion-icon>
  <ion-label>Redeem</ion-label>
</ion-tab-button>

<ion-tab-button tab="account">
  <img src="./assets/face28.jpg" alt="pic">
  <ion-label>Account</ion-label>
</ion-tab-button>

l face no console errors by the way

1 post - 1 participant

Read full topic