Skip to content

Syntax highlighting for ICU messages in templates highlights non-errors as error #62697

@hybrist

Description

@hybrist

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

language-service

Is this a regression?

No

Description

Prettier will format an Angular template using a plural i18n message like this:

<p class="text-sm font-medium text-green-800" i18n>
  @let count = bundles.value().length;
  {count, plural,
    one {{{count}} Stored Bundle}
    other {{{count}} Stored Bundles}
  }
</p>

This compiles and works great but the third curly in the {{{ sequence is highlighted in red in VSCode and the bracket matching is broken as well for expression. It doesn't get the entire file into a bad state (in my testing) but it's confusing. Especially since it can't (?) be fixed without disabling the automated formatting or arbitrarily changing the text in the UI.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw


Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.1.0
Node: 23.8.0 (Unsupported)
Package Manager: pnpm 10.6.1
OS: darwin arm64

Angular: 20.1.0
... build, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2001.0 (cli-only)
@angular-devkit/core         20.1.0 (cli-only)
@angular-devkit/schematics   20.1.0 (cli-only)
@schematics/angular          20.1.0 (cli-only)
rxjs                         7.8.2
typescript                   5.8.3

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: language-serviceIssues related to Angular's VS Code language service

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions