bug: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'appendChild' of undefined

Bug Report

Ionic version: [x] 4.x

Current behavior: i have a home page with some ion-card when i click a item this open a modal windows, everything ok. i close the modal window, click the tab to see another page and get this message.

Full stack error core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘appendChild’ of undefined TypeError: Cannot read property ‘appendChild’ of undefined at StackController.push…/node_modules/@ionic/angular/dist/fesm5.js.StackController.transition (fesm5.js:3842) at fesm5.js:3619 at StackController.<anonymous> (fesm5.js:3881) at step (tslib.es6.js:99) at Object.next (tslib.es6.js:80) at fulfilled (tslib.es6.js:70) at ZoneDelegate.invoke (zone-evergreen.js:359) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:855 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39680) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469) at invokeTask (zone-evergreen.js:1603)

HomeModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule} from '@angular/forms';
import { HomePage } from './home.page';
import { ComponentsModule } from '../components/components.module';
import { VistaCatalogoPage } from '../modals/vistacatalogo/vercatalogo.page';


@NgModule({
  imports: [
    CommonModule,ReactiveFormsModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ComponentsModule
  ],
  exports: [],
  declarations: [HomePage, VistaCatalogoPage],
  entryComponents: [VistaCatalogoPage]
})
export class HomePageModule {}

Modalpage Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { ComponentsModule } from './../../components/components.module';

import { VistaCatalogoPage } from './vercatalogo.page';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild([
      {
        path: '',
        component: VistaCatalogoPage
      }
    ]),
  ],
  declarations: [VistaCatalogoPage]
})
export class VistaCatalogoPageModule {}

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.6 (C:\Users\User-pc\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.4
   @angular-devkit/build-angular : 0.803.20
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.3.20
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (C:\Users\User-pc\AppData\Local\Android\Sdk)
   NodeJS            : v12.13.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.12.0
   OS                : Windows 10```

[jommega]

I have found that it causes this error: in my modal component I have added an ion-footer with 2 tabs.

When I remove it the error is removed and the navigation works.

What do I have to do so that the modal tabs do not affect the tab template that I have on the homepage.

my home page have 4 tabs and in my modal page 2 tabs.

appreciate your help. thanks

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.