Control flow schematic: async pipe + let + else usage produces invalid code

[mattlewis92]

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

core

Is this a regression?

No

Description

Input:

<div *ngIf="item$ | async; let item; else: loadingTemplate"></div>
<ng-template #loadingTemplate> Loading </ng-template>

Output:

@if (item$ | async; as item) {
  <div></div>
} @else {
  #: loadingTemplate|
}
<ng-template #loadingTemplate> Loading </ng-template>

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?

No response

[jessicajaniuk]

@mattlewis92 Thanks for filing this! This is happening because there's a colon after the else in your initial template, which is not the proper syntax for an ngIf/else. The migration is not expecting that to be present.

<div *ngIf="item$ | async; let item; else loadingTemplate"></div>
<ng-template #loadingTemplate> Loading </ng-template>

[mattlewis92]

Odd, having the colon after the else does appear to actually work, even though it's not official angular syntax: https://stackblitz.com/edit/stackblitz-starters-3wtqjv?file=src%2Fmain.ts

But luckily we don't have a huge amount of cases of this in our codebase, so I'll just manually fix these before running the migration 😄

[mattlewis92]

Ah, it seems like prettier is responsible for adding the extra colon after the else condition:

I guess a bug should be filed there?

[jessicajaniuk]

@mattlewis92 Yeah, since it works, it's likely you're not the only one with this issue. I'll put up a fix for it.

[jessicajaniuk]

@mattlewis92 Yeah that would be great if you could file that bug with prettier. Thank you! In the meantime, a fix should be out shortly.

[mattlewis92]

@mattlewis92 Yeah that would be great if you could file that bug with prettier. Thank you! In the meantime, a fix should be out shortly.

Thank you so much for the fast response!

I've filed the bug with prettier: prettier/prettier#15719