Prettier does not support new angular template syntax

[marekdon]

Summary

Since angular 17, we can use new template syntax. Prettier does not seem to format html document in a proper way, when new template syntax is present.

Github Repository to Reproduce Issue

Screenshot attached

Steps To Reproduce:

1. Use new template syntax in angular project
2. Save the document

Expected result

@if (true) {
  <div>
    @if (true) { 
      @if (true) {
        <div></div>
      }
    }
  </div>
}

Actual result

@if (true) {
<div>
  @if (true) { @if (true) {
  <div> </div>
  } }
</div>
}

Additional information

VS Code Version:

Version: 1.94.0 (Universal)

Prettier Extension Version:

v.11.0.0

OS and version:

iOS 15.0.1 (24A348)

Prettier Log Output

{
  "parser": "angular",
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true,
  "arrowParens": "always"
}

[github-actions]

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

[LeQuyetTien]

Same problem with me.

[sm-sayedi]

This is exactly what I am facing and it is so annoying. WebStrom does an incredible job with formatting the new syntax. Sometimes, I think of switching to WebStorm for my Angular projects!