ngsp is not working properly with control flow syntax

[cexbrayat]

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

core

Is this a regression?

Yes

Description

The following template uses *ngIf and generates 2 span elements with a space between them:

  <div id="ng-if">
    <span *ngIf="true">Hello</span>
    &ngsp;
    <span *ngIf="true">World</span>
  </div>

This results in <span>Hello</span> <span>World</span>, which is expected

When running the control flow migration, we end up with this template:

  <div id="if-outside">
      @if (true) {<span>Hello</span>}
      &ngsp;
      @if (true) {<span>World</span>}
  </div>

which results in this HTML, with no space: <span>Hello</span><span>World</span>.

It looks like the &ngsp; is ignored by the control-flow syntax.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-hzrodb?file=src%2Fmain.ts

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.3.7
Node: 18.20.1
Package Manager: npm 9.7.1
OS: darwin arm64

Angular: 17.3.8
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.5

Anything else?

Note that moving the &ngsp; inside the @if does work:

  <div id="if-inside">
      @if (true) {<span>Hello</span>&ngsp;}      
      @if (true) {<span>World</span>}
  </div>

[JeanMeche]

Note, there is the same issue with the nbsp entity but other entities seem to be fine.