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

[HitkoDev]

🐞 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

[HitkoDev]

It seems with nested ICU getRenderParent returns a comment node, which in turn throws this error as comment nodes can't have children.

[AndrewKushnir]

Hi @HitkoDev, thanks for reporting the issue, we were able to reproduce it. Initial investigation revealed that the problem happens only when ICU cases have different shape, i.e. one of them has a nested ICU and another one does not. As a temporary workaround (to get unblocked), try to update the code to use *ngSwitch instead of an ICU in that particular scenario. Thank you.

[HitkoDev]

Thanks, I've already done that as a temporary fix. It did, however, increase translation complexity in a few places, but I'll take it until a proper fix is available.

[gizm0bill]

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

[HitkoDev]

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.

[gizm0bill]

I see @HitkoDev ... Do you mind sharing an example so I can check my code for that kind of case?

[HitkoDev]

I don't have that code anymore (I don't recall which ICU in my app that fix broke, and I've since rewritten some of them to avoid this problem), but a combination of nested ICUs and HTML tags in ICU sometimes gave me

<div>
  <span>foo<span>bar</span></span>
</div>

instead of

<div>
  <span>foo</span>
  <span>bar</span>
</div>

It still got an incorrect getRenderParent, however thanks to this fix the returned parent was now a HTML element so it didn't broke completely, it just appended the result to the wrong parent.

[AndrewKushnir]

FYI, this problem should be resolved by #39003.

[angular-automatic-lock-bot]

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.}