Angular - optional chaining not working with Signal object with optional property, about angular

[alxhub]

Without an actually runnable reproduction it's impossible to verify, but it looks to me like the type-checking error is correct per your types. user.contracts.length > 0 is not a safe expression to execute since user.contracts is potentially undefined (declared optional: contracts?: Array<AnyContractDTO>), and nothing guards its access.

[dreamstar-enterprises]

I tried again. - it definitely doesn't work

This doesn't work

        @if(user().contracts && user().contracts?.length > 0) {
          <p class="contract-info">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="red" class="contract-svg" width="24" height="24" focusable="false">
              <path d="M13 13h5v1h-5zm5-5H6v3h12zm-5 8h5v-1h-5zm9-12v13a3 3 0 01-3 3H5a3 3 0 01-3-3V4zm-2 2H4v11a1 1 0 001 1h14a1 1 0 001-1zm-9 7H6v3h5z"></path>
            </svg>
            {{ user().contracts?.length }}  @if(user().contracts?.length == 1) { contract } @else { contracts }
          </p>
        }

Neither does this:

        @if(user().contracts && user().contracts.length > 0) {
          <p class="contract-info">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="red" class="contract-svg" width="24" height="24" focusable="false">
              <path d="M13 13h5v1h-5zm5-5H6v3h12zm-5 8h5v-1h-5zm9-12v13a3 3 0 01-3 3H5a3 3 0 01-3-3V4zm-2 2H4v11a1 1 0 001 1h14a1 1 0 001-1zm-9 7H6v3h5z"></path>
            </svg>
            {{ user().contracts?.length }}  @if(user().contracts?.length == 1) { contract } @else { contracts }
          </p>
        }

But this does:

@if(user().contracts; as contracts) {
        @if(contracts && contracts.length > 0) {
          <p class="contract-info">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="red" class="contract-svg" width="24" height="24" focusable="false">
              <path d="M13 13h5v1h-5zm5-5H6v3h12zm-5 8h5v-1h-5zm9-12v13a3 3 0 01-3 3H5a3 3 0 01-3-3V4zm-2 2H4v11a1 1 0 001 1h14a1 1 0 001-1zm-9 7H6v3h5z"></path>
            </svg>
            {{ contracts?.length }}  @if(contracts?.length == 1) { contract } @else { contracts }
          </p>
        }
      }

If I do:

contracts && contracts?.length > 0

It fails, bizarrely. (same object undefined message)

I think this is a typescript issue, as it's not doing a smart casting of the second condition against the '>' check.