fix: 🐛 @angular/core:control-flow schematic fails on some multi-line elements #53248
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
When running the migration schematic, it creates malformed html because the termination span ends on a new line. This can be replicated with or without choosing to re-format the code when asked.
<ul class="list-group list-group-flush">
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
<div>Keywords</div>
<span>
<ng-container *ngIf="view.keywords != null; else showNoKeywords">
{{ view.supplierUrl.keywords.length }}
</ng-container>
<ng-template #showNoKeywords> 0 </ng-template></span
>
</li>
</ul>
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/~/github.com/bjornharvold/angular-control-flow
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.0.3
Node: 20.10.0
Package Manager: yarn 1.22.21
OS: darwin arm64
Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.3
@angular-devkit/build-angular 17.0.3
@angular-devkit/core 17.0.3
@angular-devkit/schematics 17.0.3
@angular/cli 17.0.3
@schematics/angular 17.0.3
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2
Anything else?
No response