routerLink directive with object key in url breaks HTML highlighting

[andreyjamer]

🐞 bug report

Is this a regression?

May be

Description

Recently I updated the project to the latest Angular 15. Current version of the extension is v17.0.2

routerLink with object.key parameter breaks the HTML file highlighting
Here is a screenshot:

The code after [routerLink]="['report', report.id]" is not highlighted properly

Interesting point that the same code looks ok on the previous version of the product (Angular 13.3.11). The version of the extension if the same. Here is a screenshot:

Bug Type

What does this bug affect

• Angular Language Service VSCode extension
• Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. Create a new project based on Angular 15
2. Create an parameter in app.component.ts link = { id: 1}
3. Create a tag in the template: <a [routerLink]="[link.id]">link</a>
4. The code after routerLink will not be highlighted

Expected behavior

The HTML template highlighting should not break on routerLink directive.

Screenshots

🌍 Your Environment

Angular Version:

15.2.10

Extension Version:

v17.0.2

VSCode Version:

Version: 1.84.2 (user setup)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:51:52.184Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.22631

Operating System:

Edition	Windows 11 Enterprise
Version	23H2
Installed on	‎24.‎04.‎2023
OS build	22631.2428
Experience	Windows Feature Experience Pack 1000.22674.1000.0

[andreyjamer]

Seems like the problems is caused by another extension: Vue Language Features (Volar)
After disabling it the highlighting is ok.

Sorry!

[angular-automatic-lock-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.}