Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i18n within foreignObject doesn't work with nested tags #36941

Closed
Goodwine opened this issue May 5, 2020 · 3 comments
Closed

i18n within foreignObject doesn't work with nested tags #36941

Goodwine opened this issue May 5, 2020 · 3 comments
Assignees
@AndrewKushnir
Labels
area: i18n freq1: low P5 The team acknowledges the request but does not plan to address it, it remains open for discussion state: confirmed type: bug/fix
Milestone
Backlog

Comments

@Goodwine
Copy link

Goodwine commented May 5, 2020 •
edited

🐞 bug report

Affected Package

@angular/compiler
Angular i18n

Is this a regression?

No

Description

An svg element with foreignObject can contain any kind of HTML tags like <div> or <span>.
However If a span is nested inside a div that contains i18n the build breaks.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-va9pj8?file=src%2Fapp%2Fapp.component.html
See the comment about removing i18n

🔥 Exception or Error

Error in /turbo_modules/@angular/compiler@9.1.0/bundles/compiler.umd.js (21449:23)

Unexpected closing tag "xhtml:span". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("Lorem ipsum dolor sit amet, <:xhtml:span class="foo">rutrum[ERROR ->]</:xhtml:span> imperdiet eros."): ng:///AppModule/AppComponent.html@0:59

🌍 Your Environment

Angular Version:
9.x

Anything else relevant?
Existing workaround is to move the HTML from within <foreignObject> to an <ng-template>
https://stackblitz.com/edit/angular-hfqm3v?file=src/app/app.component.html

<svg:g>
  ...
  <foreignObject>
    <xhtml:div>
      ...
-      <div i18n="asd">x<span>{{foo.bar.baz //i18n(ph="name")}}</span></div>
+      <ng-container *ngTemplateOutlet="myTemplate; context: {name:foo.bar.baz}">
+      </ng-container>
    </xhtml:div>
  </foreignObject>
</svg:g>
+<ng-template #myTemplate let-name="name">
+  <div i18n="asd">x<span>{{name //i18n(ph="name")}}</span></div>
+</ng-template>
@ngbot ngbot bot added this to the needsTriage milestone May 5, 2020
@ngbot ngbot bot modified the milestones: needsTriage, Backlog May 5, 2020
AndrewKushnir added a commit to AndrewKushnir/angular that referenced this issue May 6, 2020
@AndrewKushnir
test(core): verify that Ivy i18n works correctly with HTML namespaces
a8e2c22 
This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to angular#36941.
@AndrewKushnir AndrewKushnir mentioned this issue May 6, 2020
Closed
3 tasks
@AndrewKushnir AndrewKushnir self-assigned this May 6, 2020
AndrewKushnir added a commit to AndrewKushnir/angular that referenced this issue May 6, 2020
@AndrewKushnir
test(core): verify that Ivy i18n works correctly with HTML namespaces
0741090 
This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to angular#36941.
@AndrewKushnir
Copy link
Contributor

Hi @Goodwine,

Thanks for reporting the issue. I've performed additional investigation and found out that this problem affects View Engine only and the same use-case works correctly in Ivy. I've created #36943 with additional tests to confirm that.

Thank you.

AndrewKushnir added a commit to AndrewKushnir/angular that referenced this issue May 6, 2020
@AndrewKushnir
test(core): verify that Ivy i18n works correctly with HTML namespaces
768e47a 
This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to angular#36941.
AndrewKushnir added a commit to AndrewKushnir/angular that referenced this issue May 14, 2020
@AndrewKushnir
test(core): verify that Ivy i18n works correctly with HTML namespaces
7cf6f98 
This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to angular#36941.
kara pushed a commit that referenced this issue May 14, 2020
@AndrewKushnir @kara
test(core): verify that Ivy i18n works correctly with HTML namespaces (…
7a30153 
…#36943)

This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to #36941.

PR Close #36943
kara pushed a commit that referenced this issue May 14, 2020
@AndrewKushnir @kara
test(core): verify that Ivy i18n works correctly with HTML namespaces (…
4de546e 
…#36943)

This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to #36941.

PR Close #36943
profanis pushed a commit to profanis/angular that referenced this issue Sep 5, 2020
@AndrewKushnir @profanis
test(core): verify that Ivy i18n works correctly with HTML namespaces (…
e8d3481 
…angular#36943)

This commit adds several tests to verify that i18n logic in Ivy handles elements with HTML namespaces correctly.

Related to angular#36941.

PR Close angular#36943
@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent P5 The team acknowledges the request but does not plan to address it, it remains open for discussion and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent severity3: broken labels Oct 1, 2020
@petebacondarwin
Copy link
Member

Since ViewEngine is deprecated and this is fixed in Ivy, I am going to close this.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@AndrewKushnir AndrewKushnir

Labels
area: i18n freq1: low P5 The team acknowledges the request but does not plan to address it, it remains open for discussion state: confirmed type: bug/fix
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
4 participants
@petebacondarwin @jelbourn @Goodwine @AndrewKushnir