Angular+Capacitor移动端部署后页面内容不显示问题求助

问题背景 #

基于Angular 17.0.2 + Capacitor开发的SubTrack订阅管理应用，本地ng serve环境下所有功能正常，订阅列表、用户详情等内容完整显示；但打包部署到Android设备后，仅顶部标题栏和底部菜单栏可见，主内容区域完全空白。

技术栈：Angular 17.0.2、Firebase（仅用于数据存储，未使用Firebase Auth管理会话）、Capacitor（移动端部署）、@capacitor-firebase/authentication 6.1.0（Google登录选择器）、TypeScript。

已完成排查：验证Firebase API返回数据符合预期，检查capacitor.config.ts配置及www文件夹文件，确认本地环境下认证守卫工作正常。

核心排查方向 #

1. 认证守卫的移动端兼容性问题 #

你的大部分路由都通过authGuard做权限校验，本地正常但移动端可能存在逻辑差异：

• 检查authGuard是否依赖浏览器专属API（比如localStorage/sessionStorage），Capacitor移动端的存储机制与浏览器不同，建议替换为Capacitor官方的Storage插件存储认证状态。
• 确认登录后用户状态同步逻辑，比如@capacitor-firebase/authentication返回的用户信息是否正确同步到Angular状态中。移动端异步操作时机可能与本地有差异，导致守卫误判用户未登录，拦截主内容组件渲染（标题栏/菜单栏在根组件中，不受守卫影响）。

2. Firebase数据加载的移动端异常 #

虽然本地API返回正常，但移动端可能存在以下问题：

• 网络权限缺失：检查AndroidManifest.xml中是否包含<uses-permission android:name="android.permission.INTERNET" />，Capacitor默认会添加该权限，但可能被误删。
• Firebase配置不一致：确认移动端使用的google-services.json与本地开发环境配置完全一致，重点核对API密钥、项目ID等关键信息。
• 未捕获的异步错误：主内容组件订阅Firebase数据时，是否添加了错误处理？移动端网络延迟或连接问题可能导致数据加载失败，若未处理错误会导致组件静默失败，内容不渲染。可通过Capacitor的Console插件查看移动端日志捕获错误信息。

3. Angular路由与Base Href配置 #

• 检查Angular HTML5路由模式的base href配置，确认angular.json中build配置的baseHref值为./，避免路由路径错误导致组件无法加载。
• 临时注释掉home路由的canActivate: [authGuard]配置，重新部署到移动端。若主内容显示，说明守卫逻辑在移动端存在问题。

4. 组件样式或生命周期问题 #

• 检查主内容组件的样式，是否存在height: 100%这类依赖浏览器视口的设置，移动端状态栏、导航栏会占用高度，可能导致内容被挤出可视区域；或是否有条件渲染逻辑在移动端误触发display: none。
• 确认组件生命周期钩子（如ngOnInit）在移动端是否正常执行，是否有依赖浏览器DOM API的代码导致执行失败，进而影响数据加载与渲染。

快速验证步骤 #

1. 注释home路由的canActivate配置，打包部署到Android，判断主内容是否显示，排除守卫拦截可能性。
2. 在主内容组件的Firebase数据订阅中添加catchError，打印错误到控制台，用Capacitor Console查看移动端日志。
3. 检查capacitor.config.ts的server配置，确保directory指向www，cleartext设置符合测试需求（若使用本地测试服务器）。

现有路由配置 #

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',
  },
]

截图对比 #

• 移动端订阅页：仅底部菜单和标题栏可见，订阅列表及图表缺失
• 本地订阅页：所有内容正常显示
• 移动端账户页：仅底部菜单和标题栏可见，用户姓名不显示
• 本地账户页：用户姓名正常显示

内容的提问来源于stack exchange，提问作者Zeqirie