Control flow schematic: multiple ngIf usages with the i18n attribute produces invalid code

[mattlewis92]

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

core

Is this a regression?

No

Description

Using the @angular/core:control-flow-migration schematic produces invalid code when using multiple ngIf's in the same template combined with the i18n attribute.

Input:

<ng-template *ngIf="false; else barTempl" i18n="@@foo">
  Foo
</ng-template>
<ng-template i18n="@@bar" #barTempl> Bar </ng-template>

<a *ngIf="true" i18n="@@bam">Bam</a>

Output:

@if (false) {
  <ng-container i18n="@@foo">
    Foo
  </ng-container>
} @else {
  #barTempl|
}
<ng-template i1@if (true) {
  8nTempl> Bar </ng-templ
  }ate>
  <a *ngIf="true" i18n="@@bam">Bam</a>

Please provide a link to a minimal reproduction of the bug

See above for a minimal test case

Please provide the exception or error you saw

N/A

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

Angular CLI: 17.0.3
Node: 18.17.1
Package Manager: pnpm 8.10.5
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.1
@angular-devkit/build-angular   17.0.3
@angular-devkit/core            17.0.3
@angular-devkit/schematics      17.0.3
@angular/cdk                    17.0.1
@angular/cli                    17.0.3
@angular/google-maps            15.2.9
@schematics/angular             17.0.3
ng-packagr                      17.0.2
rxjs                            7.8.0
typescript                      5.2.2
webpack                         5.88.2
zone.js                         0.14.2

### Anything else?

Thank you for providing the control flow migration schematic, it's really helpful!

[jessicajaniuk]

@mattlewis92 Thanks for this report! I've been able to replicate it with your example. I'll hopefully have a fix up soon.

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