Syntax highlighting breaks after use dot inside square brackets

[Zaleck-a]

🐞 bug report

Is this a regression?

No, it isn't

Description

Syntax highlighting breaks after use dot inside square brackets

Bug Type

What does this bug affect

• [x] Angular Language Service VSCode extension
• [ ] Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. Go to create any DOM element in angular template
2. Inside class create a property of type object, e.g: testConfiguration: {name: 'th'}
3. Create an enum, e.g: enum BaseColumnNames {th = 'th'}
4. Finally in the element add if directive and use the property by selecting it with enum

Expected behavior

It should be worked with this kind of syntax without changing the colors

🌍 Your Environment

Angular Version:

16.2.12

Extension Version:

17.2.1

VSCode Version:

1.86.1 

Operating System:

macOs Sonoma Version 14.1.2

Screenshot:

[atscott]

Duplicate of #1989. The Vue syntax highlighting is taking over right in the middle of property binding and breaks Angular syntax highlighting. You will need to disable Vue syntax highlighting to resolve this issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}