Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Ivy] Nested ICU throws `Failed to execute 'appendChild' on 'Node'`

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/core, @angular/compiler

Is this a regression?

Yes, the previous version in which this bug was not present was: before Ivy

Description

Using nested ICU expressions in Ivy results in render errors

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-qr9dqx

🔥 Exception or Error

ERROR DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at DefaultDomRenderer2.appendChild (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/platform-browser@9.1.6/__ivy_ngcc__/bundles/platform-browser.umd.js:909:20)
    at nativeAppendChild (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:9806:22)
    at nativeAppendOrInsertBefore (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:9817:13)
    at appendChild (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:9884:17)
    at appendI18nNode (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:24289:9)
    at readCreateOpCodes (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:24500:29)
    at readUpdateOpCodes (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:24637:41)
    at readUpdateOpCodes (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:24646:41)
    at Object.ɵɵi18nApply (https://angular-issue-repro2-qr9dqx.stackblitz.io/turbo_modules/@angular/core@9.1.6/__ivy_ngcc__/bundles/core.umd.js:24814:13)
    at AppComponent_div_2_Template (https://angular-issue-repro2-qr9dqx.stackblitz.io/~/src/app/app.component.ts:27:8)

🌍 Your Environment

Angular Version:

Angular: 9.1.4

Issue Analytics

State:
Created 3 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

HitkoDevcommented, May 29, 2020

I got it fixed adding a zero-width space  before the nested expression

I’ve noticed the same thing, however it only works in this particular case because an extra text element offsets the index by 1 which happens to make compiler resolve the correct target. With slightly different ICU expressions that solution no longer works.

0reactions

angular-automatic-lock-bot[bot]commented, Nov 22, 2020

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

Failed to execute 'appendChild' on 'Node': parameter 1 is not ...

It's actually a simple answer. Your function is returning a string rather than the div node. appendChild can only append a node.

Go release.r56 Release - GitClear

net: TestLookupNullByte is failing on macOS (and maybe other non-Windows ports) ... [Ivy] Nested ICU throws `Failed to execute 'appendChild' on 'Node'`.

angular/core - UNPKG

251, /** Throws an error when a token is not found in DI. */ ... 586, * allow us to execute a function...

Viewing online file analysis results for 'vendor-es5.js'

... Replace nested ICU expression by a comment node valueArr[j] ... 'function'; })) { throw Error('ListKeyManager items in typeahead mode must implement the ......

top5relatedtags - Stack Exchange Data Explorer

... 'query-optimization', 'exec', 'internet-explorer-9', 'ionic', ... 'fatal-error', 'preg-match-all', 'youtube-data-api', 'runnable', ...