Cordova+Angular应用点击返回按钮导致屏幕重叠问题排查

我正在开发一款基于Angular构建、通过Cordova打包为Android的应用。点击设备返回按钮后，当前屏幕会与上一屏幕的元素重叠，浏览器版本测试也出现此问题（点击返回后3个页面元素堆叠显示）。应用采用懒加载进行页面导航，路由配置如下：

const routes: Routes = [
  {
    path: '', component: HomeComponent, children: [
      {
        path: 'contato',
        loadChildren: () => import('../contato/contato.module').then(m => m.ContatoModule)
      },
      {
        path: 'perfil',
        loadChildren: () => import('../perfil/perfil.module').then(m => m.PerfilModule)
      },
      {
        path: 'minhaAgenda',
        loadChildren: () => import('../minha-agenda/minha-agenda.module').then(m => m.MinhaAgendaModule)
      },
      {
        path: 'sobre',
        loadChildren: () => import('../sobre/sobre.module').then(m => m.SobreModule)
      },
      {
        path: 'agendar',
        loadChildren: () => import('../agendar/agendar.module').then(m => m.AgendarModule)
      },
      {
        path: 'alterarSenha',
        loadChildren: () => import('../alterar-senha/alterar-senha.module').then(m => m.AlterarSenhaModule)
      },
      {
        path: 'buscarBarbearia',
        loadChildren: () => import('../buscar-barbearia/buscar-barbearia.module').then(m => m.BuscarBarbeariaModule)
      },
      {
        path: 'detalheInformativo',
        loadChildren: () => import('../detalhe-informativo/detalhe-informativo.module').then(m => m.DetalheInformativoModule)
      },
      {
        path: 'menuAdministrativo',
        loadChildren: () => import('../menu-administrativo/menu-administrativo.module').then(m => m.MenuAdministrativoModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'cadastrarBarbearia',
        loadChildren: () => import('../cadastrar-barbearia/cadastrar-barbearia.module').then(m => m.CadastrarBarbeariaModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'barbearia',
        loadChildren: () => import('../barbearia/barbearia.module').then(m => m.BarbeariaModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'cadastrarBarbeiros',
        loadChildren: () => import('../cadastrar-barbeiros/cadastrar-barbeiros.module').then(m => m.CadastrarBarbeirosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'barbeiro',
        loadChildren: () => import('../barbeiro/barbeiro.module').then(m => m.BarbeiroModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'agenda',
        loadChildren: () => import('../agenda/agenda.module').then(m => m.AgendaModule),
        canActivate: [FuncionarioGuard]
      },
      {
        path: 'cadastrarServicos',
        loadChildren: () => import('../cadastrar-servicos/cadastrar-servicos.module').then(m => m.CadastrarServicosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'servico',
        loadChildren: () => import('../servico/servico.module').then(m => m.ServicoModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'relatorios',
        loadChildren: () => import('../relatorios/relatorios.module').then(m => m.RelatoriosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'cadastrarHorarios',
        loadChildren: () => import('../cadastrar-horarios/cadastrar-horarios.module').then(m => m.CadastrarHorariosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'horarios',
        loadChildren: () => import('../horarios/horarios.module').then(m => m.HorariosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'filiarBarbearia',
        loadChildren: () => import('../filiar-barbearia/filiar-barbearia.module').then(m => m.FiliarBarbeariaModule)
      },
      {
        path: 'clientesFiliados',
        loadChildren: () => import('../clientes-filiados/clientes-filiados.module').then(m => m.ClientesFiliadosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'noticias',
        loadChildren: () => import('../noticias/noticias.module').then(m => m.NoticiasModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'cadastrarInformativos',
        loadChildren: () => import('../cadastrar-informativos/cadastrar-informativos.module').then(m => m.CadastrarInformativosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'informativos',
        loadChildren: () => import('../informativos/informativos.module').then(m => m.InformativosModule),
        canActivate: [AdministradorGuard]
      },
      {
        path: 'cadastrarPesquisa',
        loadChildren: () => import('../cadastrar-pesquisa/cadastrar-pesquisa.module').then(m => m.CadastrarPesquisaModule)
      },
      {
        path: 'pesquisa',
        loadChildren: () => import('../pesquisa/pesquisa.module').then(m => m.PesquisaModule)
      },
      // {
      //   path: 'cadastrarNotificacoes',
      //   loadChildren: () => import('../cadastrar-notificacoes/cadastrar-notificacoes.module').then(m => m.CadastrarNotificacoesModule)
      // },
      {
        path: 'notificacoes',
        loadChildren: () => import('../notificacoes/notificacoes.module').then(m => m.NotificacoesModule)
      },
      {
        path: 'faturas',
        loadChildren: () => import('../faturas/faturas.module').then(m => m.FaturasModule)
      },
      {
        path: 'detalheNotificacao',
        loadChildren: () => import('../detalhe-notificacao/detalhe-notificacao.module').then(m => m.DetalheNotificacaoModule)
      },
      {
        path: 'cadastrarComissao',
        loadChildren: () => import('../cadastrar-comissao/cadastrar-comissao.module').then(m => m.CadastrarComissaoModule)
      },
      {
        path: 'comissao',
        loadChildren: () => import('../comissao/comissao.module').then(m => m.ComissaoModule)
      },
    ],
    canActivate: [LoginGuard]
  },

  {
    path: 'login', component: LoginComponent
  },
  {
    path: 'cadastro', component: CadastroComponent
  },
  {
    path: 'esqueceuSenha', component: EsqueceuSenhaComponent
  },
  {
    path: 'alterarSenhaDeslog', component: AlterarSenhaDeslogComponent
  },
  {
    path: 'codigoRecuperacao', component: CodigoRecuperacaoComponent
  },
  { path: '**', component: LoginComponent }

];

我尝试修改cordova.js但未解决问题，请问该问题可能由什么原因导致？

• 组件未被正确销毁：Angular路由跳转时，离开的组件如果存在未清理的订阅、全局DOM操作，或者使用OnPush策略但未触发变更检测，会导致组件实例残留，页面元素叠加。
• <router-outlet>样式冲突：检查HomeComponent中的路由出口是否设置了异常样式（如position: absolute、未重置z-index），或者页面中存在多个<router-outlet>导致重复渲染。
• 返回事件处理错误：自定义Cordova返回按钮监听时，若未正确调用Angular路由的back()方法，或者重复绑定事件，会导致路由栈混乱，触发多次组件渲染。
• 懒加载路由配置问题：部分懒加载模块的路由未设置pathMatch: 'full'，或者模块内路由存在路径重复，导致路由匹配错误，多个组件同时渲染。
• 路由栈异常：手动导航时滥用replaceUrl或未正确管理历史记录，导致路由栈中存在重复条目，返回时加载多个页面组件。
• 第三方组件未清理：组件中使用的弹窗、图表等第三方库，在页面离开时未调用销毁方法，导致DOM元素残留叠加。

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