angular - Page content not displayed after deployment on mobile - Stack Overflow

I’m developing an app called SubTrack using Angular and Capacitor, with Firebase used solely for data storage. Everything works perfectly in local development using ng serve, I am facing an issue where the content of my Angular app is not displayed after deploying it to a mobile device using Capacitor. Here is the context and what I’ve tried so far:"

Technologies used:

• Frontend: Angular (version 17.0.2)
• Backend: Firebase (used only for storage, without Firebase Auth for session management)
• Capacitor: for mobile deployment and native functionality
• Plugin used: @capacitor-firebase/authentication (version 6.1.0) to show the Google account picker for mobile login
• Language: TypeScript

Problem description:

• In local development (ng serve), everything works perfectly. The pages display all the expected content (e.g., a list of subscriptions, user details on the account page).
• After deploying to mobile, the bottom menu bar and the top bar with the page title are visible, but the main content of the pages is empty.

Steps already tried: Verified that the API calls to Firebase return the expected data. Checked the Capacitor configuration (capacitor.config.ts) and the files in the www folder. Confirmed that the guards for authentication work as expected in local development.

Deployment details:

• I deploy the app to Android using Capacitor.
• I use the @capacitor-firebase/authentication plugin for showing the Google account picker during login.

Questions:

• Why would the content of my pages display correctly in local development but not on mobile?
• Could this be related to how Capacitor handles routing or data fetching after deployment?

Code sample:

Here is a simplified example of my routing configuration:

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    component: SubListComponent,
    canActivate: [authGuard],
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home/sub-details/:id',
    component: SubDetailsComponent,
    canActivate: [authGuard],
  },
  {
    path: 'search',
    component: SearchComponent,
    canActivate: [authGuard],
  },
  {
    path: 'add',
    component: AddSubComponent,
    canActivate: [authGuard],
  },
  {
    path: 'notifications',
    component: NotificationsComponent,
    canActivate: [authGuard],
  },
  {
    path: 'account',
    component: AccountComponent,
    canActivate: [authGuard],
  },
  {
    path: 'signin',
    component: SigninComponent,
  },
  {
    path: 'update/:id',
    component: UpdateSubComponent,
    canActivate: [authGuard],
  },
  {
    path: '404',
    component: Page404Component,
  },
  {
    path: '**',
    redirectTo: '404',
    pathMatch: 'full',
  },
]

Let me know if additional information is needed. Thank you for your help!

1. Subscriptions Page (Mobile)

"Screenshot of the subscriptions page on mobile after deployment. The bottom menu bar and the page title are visible, but the list of subscriptions and the chart are missing. The main content of the page is completely empty."

Subscriptions Page Mobile Screenshot

2. Subscriptions Page (Web - ng serve)

"Screenshot of the subscriptions page in local development using ng serve. All content displays correctly: the list of subscriptions and the chart are visible as expected."

Subscriptions Page Web Screenshot

3. Account Page (Mobile)

"Screenshot of the Account page on mobile after deployment. The bottom menu bar and the page title are visible, but the user's first and last name do not appear, even though the app considers the user logged in."

Account Page Mobile Screenshot

4. Account Page (Web - ng serve)

"Screenshot of the Account page in local development using ng serve. The first and last name of the logged-in user are displayed correctly, as expected."

Account Page WebScreenshot