Question

ionic 5 angular 10 错误：未捕获（在承诺中）：TypeError：无法读取未定义的属性（读取“appendChild”）

2022-08-17

2068

javascript ionic-framework appendchild angular10

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)

我已经遇到这个问题好几天了。我读到过这是关于导航的一些东西，关于如何声明路由的一些东西，但我找不到具体的解决方案。我尝试了几种替代方案，但都没有成功。

当我在选项卡之间导航时，只在那里发生错误，并且它不会影响程序的流程......目前。

值得澄清的是，我没有使用 Jquery。

有人知道这个错误吗？

有人通过他了吗？

记住 => ionic v5 Angular v10。

我认为有这些信息就好了，如果你需要更多信息，请告诉我。非常感谢！！！

Answer 1

因此，经过大量研究，导致我的程序崩溃的原因是 <ion-split-pane> 标签内有一个 <ion-router-outlet> 标签。 split-pane 使用路由器 (ion-router-outlet) 实现各种功能（官方文档 - 有点稀疏 - ionicframework.com/docs/v5/api/split-pane ），而我要解决的就是将 ion-router-outlet 标签更改为 ion-nav ，这样我所有的问题都解决了。显然，问题出现在使用的 ion-split-pane 组件内，而不是全局组件中。非常感谢！

Answer 2

此错误告诉您，在代码中的某处，有一个变量被认为是有效的 HTML 元素，但本质上是未定义的。

appendChild 的示例：

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

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

现在让我们看一个不起作用的示例：

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

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

请注意，在这两种情况下，Javascript 都会尝试查找 id 为 “foo” 的元素，并将 append 一个文本节点附加到它。但是，在第一个例子中有这样的节点，而在第二个例子中，我将 id 从 “foo” 更改为 “bar” ，因此找不到具有 id 为 “foo” 的元素，并且会出现错误。

与此问题类似，很可能某些东西正在搜索在搜索时不存在的元素，尽管如此，它的 appendChild 还是被调用，但您的错误抱怨的 undefined 值没有名为 appendChild 的属性。

Answer 3

我遇到了类似的问题，但在我的情况下，我使用的是 ion tabs，当 userData 变量为空时，ngIf 删除了 tabs 组件，从而导致了错误