Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

🐞 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:

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>