bug(language-service) using ngForTemplate (sugarized) with inline-template will mess-up html lint/format

[andreElrico]

🐞 bug report

Affected Package

?language service?

(I hope its the right repo to put this)

Is this a regression?

I think: no, not 100% sure

Description

Steps to reproduce:

1. copy this into *.ts in vscode

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngFor="let el of [1,2,3,4]; template: myTpl">
    </ng-container>

    <ng-template let-el #myTpl>
      <p> {{el}} </p>
    </ng-template>
    
    <hr>

    <ng-template ngFor let-item="$implicit" [ngForOf]="[11,22,33,44]" [ngForTemplate]="myTpl"></ng-template>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {}

(Stackblitz does not use language feature in inline tpl)

• STACKBLITZ

• When I use this in vscode its messes up the HTML linting/ styling.

🔥 Exception or Error

Messed up html

what it should look like (ignore red error line. There is no templateLOL input)

🌍 Your Environment

• vscode Version: 1.45.1
• Angular Language Service angular.ng-template 0.901.9

Angular Version:

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.6
@angular-devkit/build-angular      0.901.6
@angular-devkit/build-ng-packagr   0.901.7
@angular-devkit/build-optimizer    0.901.6
@angular-devkit/build-webpack      0.901.6
@angular-devkit/core               9.1.6
@angular-devkit/schematics         9.1.6
@angular/cdk                       9.2.4
@angular/cli                       9.1.6
@angular/flex-layout               9.0.0-beta.31
@angular/material                  9.2.4
@ngtools/webpack                   9.1.6
@schematics/angular                9.1.6
@schematics/update                 0.901.6
ng-packagr                         9.1.5
rxjs                               6.5.5
typescript                         3.8.3
webpack                            4.42.0

Current workaround

use of "de-sugarized" version will not mess with linting/ formating.

<ng-template ngFor let-item="$implicit" [ngForOf]="[11,22,33,44]" [ngForTemplate]="myTpl"></ng-template>

[pkozlowski-opensource]

I will add screenshots if needed

Yes, please!

[andreElrico]

my pleasure @pkozlowski-opensource

[andreElrico]

Plot twist: Its not happening when we dont have >>: << semicolon

However I know this semicolon syntax from official angular material docs:

Offical Material Stackblitz

<cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild" class="example-tree-node">

So I still think this should be a bug :/

[kyliau]

@ayazhafiz could you please take a look at this?

[ayazhafiz]

Yes, will do within the next 3 days

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