Angular 12 gives blank page after page refresh on web version

in my Angular 12 Capacitor 3 project I am using routes. Except app-routing.module.ts for root I also have tab-guest-routing.module.ts for child.

The problem is when i refresh the page on http://localhost:8100/appguest/tabguest/guest the page returns blank. This only happens in this page.

tab-guest-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from "./guards/auth.guard";


const routes: Routes = [
{ path: '', redirectTo: 'welcome', pathMatch: 'full'},
// { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomePageModule), canActivate: [AuthGuard] },
{ path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomePageModule)
},
{path: 'app', loadChildren: () => import('./pages/tablinks/tablinks.module').then(m => m.TablinksPageModule)
},
{path: 'appguest', loadChildren: () => import('./pages/tab-guest/tab-guest.module').then(m => m.TabGuestPageModule)
},
{ path: 'login', loadChildren: () => import('./pages/auth/login/login.module').then(m => m.LoginPageModule)
},
{ path: 'signup', loadChildren: () => import('./pages/auth/register/register.module').then(m => m.RegisterPageModule) },
{ path: 'about', loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule) },
{ path: 'terms', loadChildren: () => import('./pages/terms/terms.module').then(m => m.TermsPageModule) },
{ path: 'eula', loadChildren: () => import('./pages/eula/eula.module').then(m => m.EULAPageModule)},
{ path: 'about', loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule) },
{ path: 'privacy', loadChildren: () => import('./pages/privacy/privacy.module').then(m => m.PrivacyPageModule)},
{ path: 'forgot-password', loadChildren: () => import('./pages/auth/forgot-password/forgot-password.module').then(m => m.ForgotPasswordPageModule) },
{
path: 'notifications-setings',
loadChildren: () => import('./pages/notifications-setings/notifications-setings.module').then( m => m.NotificationsSetingsPageModule)
},
{
path: 'media-ad-details',
loadChildren: () => import('./pages/mediaPromote/media-ad-details/media-ad-details.module').then( m => m.MediaAdDetailsPageModule)
},

];
@NgModule({
imports: [
RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }


tab-guest-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from "../../guards/auth.guard";

import { TabGuestPage } from './tab-guest.page';
// see we converted guest as tab ok YES so we need one page to represent as guest YES
const routes: Routes = [
{
path: 'tabguest',
component: TabGuestPage,
children: [
{
path: 'guest',
children: [
{
path: '',
loadChildren: () => import('../guest/guest.module').then(m => m.GuestPageModule)
},
{ path: 'all-flows', loadChildren: () => import('../all-flows/all-flows.module').then(m => m.AllFlowsPageModule) },
{ path: 'all-media', loadChildren: () => import('../all-media/all-media.module').then(m => m.AllMediaPageModule) },
{ path: 'flow-profile', loadChildren: () => import('../flow-profile/flow-profile.module').then(m => m.FLOWPROFILEPageModule) },
{ path: 'media', loadChildren: () => import('../media/media.module').then(m => m.MediaPageModule) },
{ path: 'user', loadChildren: () => import('../user/user.module').then(m => m.UserPageModule) },
{ path: 'users', loadChildren: () => import('../users/users.module').then(m => m.UsersPageModule) },
{ path: 'top-media', loadChildren: () => import('../top-media/top-media.module').then(m => m.TopMediaPageModule) },
{ path: 'all-media-ads', loadChildren: () => import('../all-media-ads/all-media-ads.module').then(m => m.AllMediaAdsPageModule) },
{ path: 'top-reviews', loadChildren: () => import('../top-reviews/top-reviews.module').then(m => m.TopReviewsPageModule) },
]
},
{
path: 'users',

children: [
{
path: '',
loadChildren: () => import('../users/users.module').then(m => m.UsersPageModule),
},
{
path: 'user',
loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
},
]
},
{
path: 'welcome', loadChildren: () => import('../../pages/welcome/welcome.module').then(m => m.WelcomePageModule)

},

{
path: 'search',
children: [
{
path: '',
loadChildren: () => import('../search/search.module').then(m => m.SearchPageModule),
},
{
path: 'user',
loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
},
{
path: 'media',
loadChildren: () => import('../media/media.module').then(m => m.MediaPageModule)
},
{//I always checked with yor cred and guest login yes i know we should see how a new user will feel got it
path: 'flow-profile',
loadChildren: () => import('../flow-profile/flow-profile.module').then(m => m.FLOWPROFILEPageModule)
},
]
},
{
path: '',
redirectTo: '/tabguest/guest',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabguest/guest',
pathMatch: 'full'
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TabGuestPageRoutingModule { }


errors on console.

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
:8100/appguest/tabguest/runtime.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8100/appguest/tabguest/polyfills.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8100/appguest/tabguest/vendor.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8100/appguest/tabguest/main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
capacitor.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)


These errors appear only on this page and not to anyone else. whats why i think its a routing thing WHat am i doing wrong? Can someone help me?

Continue reading...