Vscode-ng-language-service: HTML comments don't look like comments anymore.

[sanket-bhalerao]

Issue Type: Bug

the comments in the html in an angular project do not look like comments.
it looks like plain code.

Extension version: 0.900.7
VS Code version: Code - Insiders 1.42.0-insider (be9c72410acc677070685a616773b122f4c5e141, 2020-01-29T05:39:07.145Z)
OS version: Windows_NT x64 10.0.17134
Remote OS version: Linux x64 4.15.0-65-generic

System Info

|Item|Value|
|---|---|
|CPUs|Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz (4 x 3292)|
|GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: disabled_off
protected_video_decode: unavailable_off
rasterization: enabled
skia_renderer: disabled_off
surface_control: disabled_off
surface_synchronization: enabled_on
video_decode: enabled
viz_display_compositor: enabled_on
viz_hit_test_surface_layer: disabled_off
webgl: enabled
webgl2: enabled|
|Load (avg)|undefined|
|Memory (System)|7.96GB (1.91GB free)|
|Process Argv||
|Screen Reader|no|
|VM|0%|

|Item|Value|
|---|---|
|Remote|SSH: angular_serve|
|OS|Linux x64 4.15.0-65-generic|
|CPUs|Intel Xeon E312xx (Sandy Bridge, IBRS update) (4 x 2399)|
|Memory (System)|7.79GB (3.03GB free)|
|VM|0%|

[ayazhafiz]

Can you provide a minimal reproduction of this? I am unable to see this with the template

<button mat-icon-button (click)="printDay(day)">
  <mat-icon>people</mat-icon>
</button>

In either an inline or external template. If there are other highlighting errors in the template, they may be impacting this.

[sanket-bhalerao]

it seems I am not able to replicate this now.
however, yesterday (while raising this) I tried to cross out all the other cases like,

1. reloading vscode.
2. restarting vscode
3. disabling other extensions to find the extn causing this.
4. creating a new project and trying the same thing in it.
   and it had the issue at all the places.
   but everything is working as expected today.

[sanket-bhalerao]

@ayazhafiz
found something regarding the bug
the *ngFor is expecting to end with a ";"
*ngFor="let range of day.ranges; let whichIndex = index;"
without the ";" in the end, the comment does not appear proper, attribute and their values change color.
without ";" ->

with ";" ->

[jsangmeister]

Having the exact same problem right now: If a structural directive contains a ';' but doesn't end with one, the syntax highlighting breaks and, whats even more annoying, VS Code seems to think that the HTML after that is still javascript so it will insert '//' when commenting code out.

Edit: Same thing happens if you have a structural directive without content, where the above workaround doesn't apply.

[sanket-bhalerao]

if you have linting enabled with eslint it removes the ";" every time 🤣

[ayazhafiz]

In this case it seems like the issue is the same as #575. Marking as duplicate to track there. If you find a bug with another root cause, feel free to open a new 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._}