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

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?

@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

Try adding a ; after let param

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

This is related to the angular expressions matching pattern. The ongoing discussion is here: https://github.com/angular/vscode-ng-language-service/issues/571

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?

Yes.

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?

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.

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

@BO41 what code are you referring to?

<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

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

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

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.

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.

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.

Append another example

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.

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.

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.

@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.)

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

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

591

yes

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

We are working on fixing this in a future patch!

От: Arnaud Crowther notifications@github.com
Отправлено: среда, января 29, 2020 6:47 AM
Кому: angular/vscode-ng-language-service
Копия: hafiz; Mention
Тема: Re: [angular/vscode-ng-language-service] Template color highlighting broke (#575)

So just to recap, adding the semicolon fixes it. Will this behavior be updated in a future patch? Or should we just be adding semicolons from now on to get proper syntax highlighting? Thank you for all your hard work!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A.

Just to add: Prettier automatically removes a semicolon from <div *ngIf="data.status as status;"> which results in this issue.

@cpboyd Any tool that lints and cleans code is going to recreate the issue if you are using the work around of the semicolon. As the presence of the semicolon is not the syntax for Angular. Once the fix has been released, and hopefully some unit tests cover it, we shouldn't have to use the work around or encounter this issue.

Except when the issue regresses :(

@cpboyd Any tool that lints and cleans code is going to recreate the issue if you are using the work around of the semicolon. As the presence of the semicolon is not the syntax for Angular. Once the fix has been released, and hopefully some unit tests cover it, we shouldn't have to use the work around or encounter this issue.

Except when the issue regresses :(

We are snapshot testing the grammars here, and once the fix is I'm sure we'll be adding test cases to cover this issue. I really don't foresee any regressions once this has been fixed. :)

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

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

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"

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

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

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"

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:

https://github.com/angular/vscode-ng-language-service/issues/575#issuecomment-580404727

https://github.com/angular/vscode-ng-language-service/issues/575#issuecomment-578128919

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

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.

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

Here is the PR for anyone who is curious: https://github.com/angular/vscode-ng-language-service/pull/609

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.

What is the ETA on 0.900.14?

@kyliau

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

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