Template color highlighting broke #575

ghost · 2020-01-24T08:15:19Z

Describe the bug

Tag highlighting is strange and inconsistent

Expected behavior

opening tags and closing tags should have the same color.
No error red should be shown if code is correct.

Screenshots

Additional context

worked in v0.900.5, broken in v0.900.6

The text was updated successfully, but these errors were encountered:

smnbbrv · 2020-01-24T09:44:52Z

In addition to the above, the comment shortcut such as ctrl + / / cmd + / produces a typescript-like comment // ... instead of html-like comment 

The issue is really annoying and makes the extension instead of being helpful to be absolutely unusable.

My guess: this is somehow related to custom structural directives such as e.g. angular material ones and / or (event) handlers.

Here are the versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.23
Node: 13.6.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.23
@angular-devkit/build-angular      0.803.23
@angular-devkit/build-optimizer    0.803.23
@angular-devkit/build-webpack      0.803.23
@angular-devkit/core               8.3.23
@angular-devkit/schematics         8.3.23
@angular/cdk                       8.2.3
@angular/cli                       8.3.23
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.23
@schematics/angular                8.3.23
@schematics/update                 0.803.23
rxjs                               6.5.4
typescript                         3.4.5
webpack                            4.39.2

ghaschel · 2020-01-24T12:40:39Z

In addition to the above, the comment shortcut such as ctrl + / / cmd + / produces a typescript-like comment // ... instead of html-like comment 

The issue is really annoying and makes the extension instead of being helpful to be absolutely unusable.

My guess: this is somehow related to custom structural directives such as e.g. angular material ones and / or (event) handlers.

Here are the versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.23
Node: 13.6.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.23
@angular-devkit/build-angular      0.803.23
@angular-devkit/build-optimizer    0.803.23
@angular-devkit/build-webpack      0.803.23
@angular-devkit/core               8.3.23
@angular-devkit/schematics         8.3.23
@angular/cdk                       8.2.3
@angular/cli                       8.3.23
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.23
@schematics/angular                8.3.23
@schematics/update                 0.803.23
rxjs                               6.5.4
typescript                         3.4.5
webpack                            4.39.2

I'm using v0.900.6 here and it doesn't happen to me. Did you try to disable other extensions to rule out any conflicting extensions?

ghost · 2020-01-24T13:18:13Z

@ghaschel you are right, it is not in every file.

I was able to narrow it down to this line causing trouble

<td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>

more specific

<td *matCellDef="let param"></td>

probably the * or the let. Removing either resolves the color mess

ghaschel · 2020-01-24T13:21:21Z

Try adding a ; after let param

ghost · 2020-01-24T13:26:30Z

adding ; seems to resolve the problem.

Is there a chance to make this chance non breaking?
Angular is not doing the ; and prettier is removing it too

ghaschel · 2020-01-24T13:31:49Z

This is related to the angular expressions matching pattern. The ongoing discussion is here: #571

smnbbrv · 2020-01-24T13:38:52Z

Try adding a ; after let param

Well, fixing a working project for a not announced breaking change of IDE plugin in order to make IDE highlighting the HTML templates properly doesn't sound like a solution...

However it's good that the issue is localised.

Will this be fixed?

ayazhafiz · 2020-01-24T16:02:00Z

Yes.

ayazhafiz · 2020-01-25T17:36:55Z

With the template

<ng-container matColumnDef="cost-code">
    <th mat-header-cell *matHeaderCellDef>
        {{ 'GENERAL.COST_CODE'  | async }}
    </th>
    <td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>
</ng-container>

I am seeing the error with the JS syntax in the *matCellDef binding, but not with the *matHeaderCellDef. @BO41 is there something I am missing?

dannymcgee · 2020-01-26T03:03:01Z

With the template
<ng-container matColumnDef="cost-code">
    <th mat-header-cell *matHeaderCellDef>
        {{ 'GENERAL.COST_CODE'  | async }}
    </th>
    <td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>
</ng-container>
I am seeing the error with the JS syntax in the *matCellDef binding, but not with the *matHeaderCellDef. @BO41 is there something I am missing?

My guess is that the breaking piece of syntax is actually further up the file, not in the screenshot. The opening ng-container is the wrong color for an HTML tag in the OP screenshot, but less noticeable than the red structural directive and the SNAFU that follows.

ghost · 2020-01-26T11:11:02Z

My guess is that the breaking piece of syntax is actually further up the file, not in the screenshot. The opening ng-container is the wrong color for an HTML tag in the OP screenshot, but less noticeable than the red structural directive and the SNAFU that follows.

That's correct. At the time of opening the issue I didn't know the cause.
Once the syntax is broken once, it doesn't recover for the rest of the file.

@ayazhafiz if you copy the same code again below, it probably looks like my screenshot

ayazhafiz · 2020-01-26T18:52:34Z

@BO41 what code are you referring to?

ghost · 2020-01-26T18:56:45Z

<ng-container matColumnDef="cost-code">
    <th mat-header-cell *matHeaderCellDef>
        {{ 'GENERAL.COST_CODE'  | async }}
    </th>
    <td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>
</ng-container>

this one. But any new opening tag should be messed up

ayazhafiz · 2020-01-26T19:03:49Z

Okay. Can you verify that the sole cause is the missing semicolon in the let param expression?

ghost · 2020-01-27T07:21:06Z

how? anything I can test?

the code is from angular.io
it works in .5
it breaks by upgrading to .6 or .7 even with all other extensions disabled
you and other people can reproduce it with different angular versions

ayazhafiz · 2020-01-27T07:35:40Z

What I mean is, can you confirm that the error in the highlighting for the issue you have reported on the ng-container tag and after the *matCellDef definition is caused by a missing semicolon.

ghost · 2020-01-27T08:07:32Z

As @ghaschel suggested

adding ; seems to resolve the problem.

or

probably the * or the let. Removing either resolves the color mess

But the semicolon isn't missing, as it shouldn't be necessary.

JochemWarmenhoven · 2020-01-27T13:47:59Z

I am having the same issue with the *ngFor directive and can confirm that adding ; to the end of *ngFor="let p of navItems fixes the rest of the formatting.

qmarquez · 2020-01-27T15:26:07Z

Append another example

ayazhafiz · 2020-01-27T16:00:07Z

Okay, we're on it. If there are other bugs independent of this one, please feel free to open a new issue. If possible, please include a minimal code sample we can copy/paste into an editor.

qmarquez · 2020-01-27T20:20:21Z

Okay, we're on it. If there are other bugs independent of this one, please feel free to open a new issue. If possible, please include a minimal code sample we can copy/paste into an editor.

<div>
  <ng-template #event>
    <ng-container *ngIf="!false">some code</ng-container>
  </ng-template>
</div>

<ng-container *ngFor="let hour of hoursToRender, let f = first, let e = even">
</ng-container>

Notes:

e on even ngFor, and let reserverd word are not properly colored.
between #event on ng-template and first whitespace before the first tag are not properly colored.

qmarquez · 2020-01-27T20:25:34Z

Sometimes ng-containger is properly colored, sometimes not:

<div class="container">
    <div class="hoursHeaderColumn">
        <ng-container *ngFor="let n of hoursToRender, let f = first, let i = index, let e = even">
            <div class="hoursHeader"
                 [class.dayHeader]="f"
                 [class.evenHour]="e">
                <span *ngIf="!f">
                    {{i - 1 + renderStartTime}}
                </span>
            </div>
        </ng-container>
    </div>
    <ng-container *ngFor="let day of daysToRender">
        <div class="day">
            <ng-container *ngFor="let hour of hoursToRender, let f = first, let e = even">
                <div (click)="onHourClick(day, hour)"
                     [class.dayHeader]="f"
                     [class.evenHour]="e"
                     [class.hour]="!f"
                     [class.picked]="!f && !loadingEvents && occuped[day.dayValue][hour].picked">
                    <span *ngIf="f else event">
                        {{day.label}}<br /> <span class="date">{{day.dateValue}}/{{day.month}}</span>
                    </span>
                    <ng-template #event>
                        <ng-container *ngIf="!loadingEvents">
                            <div class="startBleed"
                                 *ngIf="occuped[day.dayValue][hour].startBleed"></div>
                            <div class="occuped"
                                 *ngIf="occuped[day.dayValue][hour].summary && !occuped[day.dayValue][hour].startBleed && !occuped[day.dayValue][hour].endBleed">
                            </div>
                            <div class="endBleed"
                                 *ngIf="occuped[day.dayValue][hour].endBleed"></div>
                        </ng-container>
                    </ng-template>
                </div>
            </ng-container>
        </div>
    </ng-container>
    <app-loading *ngIf="loadingEvents"
                 class="eventsLoader"></app-loading>
</div>

The apropiate color should be green in my opinion.

dannymcgee · 2020-01-28T04:12:02Z

@qmarquez The failure point in your examples is the let <var> = <value> statements. If you cap those with a semicolon, I suspect you'll see consistent syntax highlighting again. (That's not to say this isn't a bug, but that it is consistently reproducible under those circumstances.)

The apropiate color should be green in my opinion.

The correct color for an HTML tag with the default Dark+ theme is dark blue. It's getting the green color because it's being highlighted as a JSX component, due to the JavaScript syntax getting "stuck" and never exiting back to HTML parsing. You can confirm this by running Developer: Inspect TM Scopes from the Command Palette and clicking on the green tags. The grammar scope for an Angular-style web component is meta.tag.custom.<start/end>.html entity.name.tag.html, which Dark+ colors the same as any other HTML tag. There are themes that color web components with a different token than plain HTML tags, but Dark+ isn't one of them. (The actual coloring that's applied isn't controlled by this extension; that's handled by themes, whereas this extension just provides the grammar scopes that themes can hook into.)

qmarquez · 2020-01-28T14:01:02Z

I suspect you'll see consistent syntax highlighting again.

Yeah, that's it, it fixed it. I thought it was separated by ','

It's all perfect! really thnks a lot! <3

sanket-bhalerao · 2020-01-29T09:15:54Z

comments do not look like comments anymore.
is anyone else observed this behaviour?
#591

smnbbrv · 2020-01-29T09:17:16Z

yes

In addition to the above, the comment shortcut such as ctrl + / / cmd + / produces a typescript-like comment // ... instead of html-like comment

mhagnumdw · 2020-02-03T20:13:21Z

@ayazhafiz , if it helps, follow another example. If you want I can put the code here.

ghaschel · 2020-02-03T20:21:52Z

@dannymcgee @ayazhafiz I have tested the grammar with the available code in this issue and against the the codebase at work. Nothing broken so far and no need to add the dreaded semicolon aswell.

cagcak · 2020-02-04T08:51:09Z

This also appears afterwards in as operator like:

<ng-container *myDirective="{ results: results$ } as data"> <!-- it breaks here -->
      <!-- All the lines below are broken -->
      <my-component
        [ngClass]="myClass"

nathanrobinson · 2020-02-06T21:13:06Z

I found a hack to get past prettier: <td mat-cell *matCellDef="let g; else"> that else fixes the syntax hilighting.

kresdjan · 2020-02-10T07:33:11Z

Just chiming in, I have the same issue.

If I remove async as post and just use async it goes away. And removing let i = index or i as index. Not really a working solution.

Angular 9
Angular Language Service v0.900.11

ghost · 2020-02-12T13:46:27Z

I am having the same issue with the *ngFor directive and can confirm that adding ; to the end of *ngFor="let p of navItems fixes the rest of the formatting.

this one worked for me

Notice the ; in the first "let sku"

cagcak · 2020-02-13T20:22:25Z

I am having the same issue with the *ngFor directive and can confirm that adding ; to the end of *ngFor="let p of navItems fixes the rest of the formatting.

this one worked for me

Notice the ; in the first "let sku"

Same issue as @BO41 and @cpboyd mentioned:

#575 (comment)

nicco91 · 2020-02-14T09:29:23Z

Is this bug so hard to fix? It's open for 21 days, despite it's so annoying that is impossible to use the plugin at the current version. I'm still using an older version, and it's ok for now, but I think you should give it a higher priority...

smnbbrv · 2020-02-14T09:43:35Z

Marketing disagrees

Significant improvements have been made to the Angular language service extension on the Visual Studio Marketplace. Along with major architectural overhaul to address performance and stability issues, many long-standing bugs have also been fixed.

It is so much improved that nobody can use it. Hah.

ayazhafiz · 2020-02-14T15:17:08Z

There is an open PR. We are all community contributors!

lincolnthree · 2020-02-14T16:45:12Z

Here is the PR for anyone who is curious: #609

ayazhafiz · 2020-02-20T16:14:22Z

Thank you for your patience. Huge thanks to @ghaschel for fixing this in #609 and to @dannymcgee for helping review. If you experience further syntax errors after the next release (0.900.14), please open another issue.

kresdjan · 2020-02-20T17:04:41Z

What is the ETA on 0.900.14?

ayazhafiz · 2020-02-20T17:48:39Z

@kyliau

kyliau · 2020-02-20T19:08:19Z

v0.900.14 has been published!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

angular-automatic-lock-bot · 2020-03-22T16:01:05Z

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.}

ghost added the bug label Jan 24, 2020

ghost changed the title ~~Template color highlighting broek~~ Template color highlighting broke Jan 24, 2020

ghaschel mentioned this issue Jan 24, 2020

Textmate grammar for template expressions #571

Closed

kyliau assigned ayazhafiz Jan 24, 2020

zacnomore mentioned this issue Feb 4, 2020

template pipe breaks formatting #613

Closed

ayazhafiz mentioned this issue Feb 6, 2020

Position of "let i = index" inside *ngFor breaks syntax check #617

Closed

sitterrus mentioned this issue Feb 7, 2020

Not recognizing second expression for directives #620

Closed

ayazhafiz mentioned this issue Feb 8, 2020

Added template expression support #609

Merged

rthm93 mentioned this issue Feb 10, 2020

angular *ngFor index problem microsoft/vscode#90124

Closed

This was referenced Feb 12, 2020

Bug with syntax highlighting in v0.900.6 and higher when using type assertion #629

Closed

*matCellDeff or let broke html intellisense #633

Closed

This was referenced Feb 16, 2020

Long lines cause wrong highlighting in a template #640

Closed

Incorrect syntax highlighting with template variables #641

Closed

christopher-kiss mentioned this issue Feb 18, 2020

as syntax marks template as TS/JS instead of HTML angular/angular#35424

Closed

ayazhafiz mentioned this issue Feb 19, 2020

bundled @angular/language-service not loaded #635

Closed

ayazhafiz linked a pull request Feb 20, 2020 that will close this issue

Added template expression support #609

Merged

ayazhafiz closed this as completed in #609 Feb 20, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 22, 2020

Template color highlighting broke #575

Template color highlighting broke #575

Comments

ghost commented Jan 24, 2020 • edited by ghost

smnbbrv commented Jan 24, 2020 • edited

ghaschel commented Jan 24, 2020

ghost commented Jan 24, 2020 • edited by ghost

ghaschel commented Jan 24, 2020

ghost commented Jan 24, 2020 • edited by ghost

ghaschel commented Jan 24, 2020

smnbbrv commented Jan 24, 2020

ayazhafiz commented Jan 24, 2020

ayazhafiz commented Jan 25, 2020

dannymcgee commented Jan 26, 2020

ghost commented Jan 26, 2020

ayazhafiz commented Jan 26, 2020

ghost commented Jan 26, 2020

ayazhafiz commented Jan 26, 2020

ghost commented Jan 27, 2020

ayazhafiz commented Jan 27, 2020

ghost commented Jan 27, 2020

JochemWarmenhoven commented Jan 27, 2020

qmarquez commented Jan 27, 2020

ayazhafiz commented Jan 27, 2020

qmarquez commented Jan 27, 2020 • edited

qmarquez commented Jan 27, 2020 • edited

dannymcgee commented Jan 28, 2020

qmarquez commented Jan 28, 2020

sanket-bhalerao commented Jan 29, 2020

smnbbrv commented Jan 29, 2020

mhagnumdw commented Feb 3, 2020

ghaschel commented Feb 3, 2020

cagcak commented Feb 4, 2020

nathanrobinson commented Feb 6, 2020

kresdjan commented Feb 10, 2020 • edited

ghost commented Feb 12, 2020 • edited by ghost

cagcak commented Feb 13, 2020

nicco91 commented Feb 14, 2020

smnbbrv commented Feb 14, 2020

ayazhafiz commented Feb 14, 2020

lincolnthree commented Feb 14, 2020

ayazhafiz commented Feb 20, 2020

kresdjan commented Feb 20, 2020

ayazhafiz commented Feb 20, 2020

kyliau commented Feb 20, 2020

angular-automatic-lock-bot bot commented Mar 22, 2020

ghost commented Jan 24, 2020 •

edited by ghost

smnbbrv commented Jan 24, 2020 •

edited

ghost commented Jan 24, 2020 •

edited by ghost

ghost commented Jan 24, 2020 •

edited by ghost

qmarquez commented Jan 27, 2020 •

edited

qmarquez commented Jan 27, 2020 •

edited

kresdjan commented Feb 10, 2020 •

edited

ghost commented Feb 12, 2020 •

edited by ghost