Thanks to visit codestin.com
Credit goes to github.com

Skip to content

angular-i18n breaks at runtime instead of buildtime when you migrate to new control flow and keep ng-container #60899

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
Open
PhilippMDoerner opened this issue Apr 17, 2025 · 0 comments
Open

angular-i18n breaks at runtime instead of buildtime when you migrate to new control flow and keep ng-container #60899

PhilippMDoerner opened this issue Apr 17, 2025 · 0 comments
Labels
area: i18n Issues related to localization and internationalization
Milestone
needsTriage

Comments

@PhilippMDoerner
Copy link
Contributor

Which @angular/* package(s) are the source of the bug?

localize

Is this a regression?

Yes

Description

Note: I do not know if this is a regression or has been there forever.

We recently started migrating our Angular project at work over to the
new control-flow syntax (@if and @for) using the provided angular
migration for it.

This migrated a few of our pieces of code that looked like this:

<div i18n="@@some-key">
   Text A
   <ng-container *ngIf="bool">
     Text B
   </ng-container>
</div>

To look like this:

<div i18n="@@some-key">
   Text A
   @if(bool){
     Text B
   }
</div>

This correctly breaks at build-time/when you try to ng-serve your
application as the content of @@some-key no longer is the same, the
placeholders changed from START_NG_CONTAINER etc. to START_BLOCK_IF etc. .

Not understanding the problem, we just added ng-container back in the
hope that this alleviates the problem:

<div i18n="@@some-key">
   Text A
   @if(bool){
     <ng-container>
       Text B
     </ng-container>
   }
</div>

This incorrectly will run with ng-serve despite the fact that the
content of @@some-key still changed, as START_BLOCK_IF were added to the
contents!

What you instead will see are runtime errors of various ilks about how
Nodes can't be inserted into the DOM, expressed through various different exceptions depending on the scenario.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

hook.js:608 ERROR HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at EmulatedEncapsulationDomRenderer2.appendChild (platform-browser.mjs:553:22)
    at BaseAnimationRenderer.appendChild (browser.mjs:4576:23)
    at nativeAppendChild (core.mjs:11435:14)
    at nativeAppendOrInsertBefore (core.mjs:11442:9)
    at appendChild (core.mjs:11523:13)
    at ɵɵelementStart (core.mjs:24350:9)
    at GradYearEntryComponent_Template (grad-year-entry.component.html:1:20)
    at executeTemplate (core.mjs:12159:9)
    at renderView (core.mjs:13366:13)
    at renderComponent (core.mjs:13312:5)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.0.7
Node: 18.20.3
Package Manager: npm 10.7.0
OS: linux x64

Angular: 18.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.17
@angular-devkit/build-angular   18.2.17
@angular-devkit/core            18.2.17
@angular-devkit/schematics      18.2.17
@angular/cdk                    18.2.14
@angular/cli                    18.0.7
@angular/material               18.2.14
@schematics/angular             18.0.7
rxjs                            7.8.2
typescript                      5.4.5
zone.js                         0.14.10

Anything else?

No response
@pkozlowski-opensource pkozlowski-opensource added the area: i18n Issues related to localization and internationalization label Apr 18, 2025
@ngbot ngbot bot added this to the needsTriage milestone Apr 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: i18n Issues related to localization and internationalization
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
2 participants
@pkozlowski-opensource @PhilippMDoerner