ng lint complains about pipe async in html files

[victornoel]

OS?

Linux Archlinux

Versions.

✗ ng --version
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".


                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.28.3
node: 7.4.0
os: linux x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/flex-layout: 2.0.0-beta.4
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

Repro steps.

The repo was initialised with angular-cli, didn't change tslint settings, basically it concerns html files where this kind of code appears:

<span fxLayout="row">
      {{ (ui$ | async)?.titleMainPart1 }}

      <span *ngIf="(ui$ | async).titleMainPart2" fxLayoutAlign="center center">
        <md-icon>chevron_right</md-icon> <span class="color-accent-bold">{{ (ui$ | async).titleMainPart2 }}</span>
      </span>
    </span>

The log given by the failure.

src/app/features/cockpit/cockpit.component.html[15, 77]: The property "async" that you're trying to access does not exist in the class declaration.
src/app/features/cockpit/cockpit.component.html[30, 45]: The property "async" that you're trying to access does not exist in the class declaration.
src/app/features/cockpit/cockpit.component.html[34, 77]: The property "async" that you're trying to access does not exist in the class declaration.

[deebloo]

@victornoel the issue is probably with codelyzer. https://github.com/mgechev/codelyzer

[delasteve]

Specifically, talked about here: mgechev/codelyzer#190

[victornoel]

@deebloo @delasteve thanks both of you. Reading the aforementioned issue I don't get if there is a solution to this problem and what is it… The issue was closed without fixes committed apparently…

[filipesilva]

Heya @victornoel, this problem is not solvable from the CLI side. Linting uses tslint and codelyzer, and from what I can gather codelyzer seems to have a bug that manifests itself this way.

As far as I can tell from mgechev/codelyzer#190 there might be a workaround, but that's all. Perhaps you can open a new issue there?

[victornoel]

@filipesilva Thanks,

So for the record, from what I understood, ngIf wasn't properly checked, and it should be fixed in the next release… I think, it's not so clear :)

[victornoel]

Actually it's not fixed for those interested by this :)

[plastikaweb]

Updating codelyzer to last version (3.0.0-beta.3 at this moment) makes linting passing.

[niklas-wortmann]

Today I have tried it with codelyzer@3.0.0 and tslint@5.1.0 and the error still appears..

[dolanmiu]

It is not fixed on codelyzer 3.0.1.

To "fix" this, do what it wants you to do. Aka, put the property async as a declaration in the class (until a real fix comes)

public async: any;

[RaphaelJenni]

V3.2.0. Still not fixed.

[plastikaweb]

If I put an "elvis" operator like this:
{{(ob$ | async)?.prop}}
tslint does not complain more... just a silly temporary fix

[ghost]

Is there a way to disable codelyzer or tslint from running on an HTML file? From what I can tell, using an HTML comment does not work. I'm having a similar issue and cannot fix it to get the linter to pass.

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