ionic 5 angular 10 Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (rea-CodePudding

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'appendChild')
TypeError: Cannot read properties of undefined (reading 'appendChild')
    at StackController.transition (ionic-angular.js:2714:1)
    at ionic-angular.js:2611:1
    at StackController.<anonymous> (ionic-angular.js:2735:1)
    at Generator.next (<anonymous>)
    at fulfilled (tslib.es6.js:71:42)
    at ZoneDelegate.invoke (zone-evergreen.js:364:1)
    at Zone.run (zone-evergreen.js:123:1)
    at zone-evergreen.js:857:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Zone.runTask (zone-evergreen.js:167:1)
    at resolvePromise (zone-evergreen.js:798:1)
    at resolvePromise (zone-evergreen.js:750:1)
    at zone-evergreen.js:860:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Object.onInvokeTask (core.js:27425:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
    at Zone.runTask (zone-evergreen.js:167:1)
    at drainMicroTaskQueue (zone-evergreen.js:569:1)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484:1)
    at invokeTask (zone-evergreen.js:1621:1)

I have had this problem for several days. I have read that it is something about navigation, something about how the routes are declared, but I cannot find a concrete solution. I have tried several alternatives but none of them have been successful.

The error occurs, when I navigate between tabs, only there, and it does not affect the flow of the program… for the moment.

It is worth clarifying that I am not using Jquery.

Does anyone have knowledge of this error?

Did someone pass him?

Remember => ionic v5 Angular v10.

I think that with that information is fine, if you need more, let me know. Thank you very much!!!

CodePudding user response：

The error is telling you that somewhere in your code there is a variable assumed to be a valid HTML element, but it is essentially undefined.

An example of appendChild:

const node = document.getElementById("foo");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);

<div id="foo"></div>

And now let's see an example where it doesn't work:

const node = document.getElementById("foo");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);

<div id="bar"></div>

See that in both cases, the Javascript attempts to find the element having the id of "foo" and append a text node to it. However, in the first example there is such a node, while in the second example I have changed the id from "foo" to "bar" and therefore the element having the id of "foo" is not found and you get an error.

It is very possible that similarly to this issue, something was searching for an element that did not exist at the time when it was being searched for and nevertheless, its appendChild was being called, but the undefined value your error complains about has no property called appendChild.

CodePudding user response：

so, after much research, what was breaking my program was that inside the <ion-split-pane> tag was an <ion-router-outlet> tag. The split-pane uses the router (ion-router-outlet) for various functions (official documentation - a bit sparse - ionicframework.com/docs/v5/api/split-pane ) and what I had to solve was change that tag ion-router-outlet to ion-nav, and all my problems were fixed. Obviously, inside that component of used ion-split-pane, not in global component. Very Thanks!