Codelyzer: no-access-missing-member and async pipe

[pierre-hilt]

Hello,

I have no-access-missing-member error in my project when linting this template:

<div class="main-section" 
  [class.actionBarDisplayed]="(actionBarState$ | async).buttons.length > 0">
  <div class="main-content top-ease-in-out">
    <dashboard *ngIf="(context$ | async) == contextWrapper.dashboard"></dashboard>
    <command
      [init]="(onCommandPageStatus$ | async)" 
      *ngIf="(context$ | async) == contextWrapper.command">
    </command>
    <comp *ngIf="(context$ | async) == contextWrapper.comp"></comp>
  </div>
  <side-bar class="right-transition hidden">
  </side-bar>
</div>

I have error only when accessing async pipe in inputs (ngif is working fine).
packages:
"codelyzer": "^2.0.0-beta.3",
"tslint": "~4.0.0",
"typescript": "2.0.3"

Do you have any idea?

Thanks,

Pierre

[jamesbirtles]

Having the exact same problem, something that made the error go away was changing things like this

(actionBarState$ | async).buttons.length

to

(actionBarState$ | async)?.buttons?.length

Though I think this might just be hiding the problem, or just preventing the rule from checking properly, so not really a long-term or good solution

[mgechev]

Thanks for pointing this out! I'll fix it during the holidays.

[pierre-hilt]

Thanks @UnwrittenFun for the workaround :+1:

[pierre-hilt]

And so that points out that ngif is not check for no-access-missing-member as well

[mgechev]

After debugging this further, it turns out that the issue is related with the *ngIf directive, not the async pipe itself.

[victornoel]

@mgechev Is there another issue open for this bug? I'm experiencing it currently (see angular/angular-cli#4351), and I don't understand from your comment why you closed the present issue…
Thanks :)

[mgechev]

It's caused by lack of metadata for the NgIf directive. This can be workarounded by updating .codelyzer.js/disabling codelyzer for this file.

As part of the new release, we'll work on improvements in this direction.

[victornoel]

Thank you for the explanation

[victornoel]

@mgechev sorry to bother you again but could you give an example of what you meant by:

This can be workarounded by updating .codelyzer.js

I really don't get how to make it work…

And by the way, why close this issue if it is not fixed (I just tried latest release)?

[mgechev]

I will take a look at the issue today. Until then, let's reopen it.

[victornoel]

@mgechev anything we can do to help fix this issue? or maybe could you share an easy workaround (via .codelyzer.js I guess) to ignore that issue on html files?

[mgechev]

Probably this is caused by the incomplete metadata collection. Introducing ngast should fix the issue. Moving to 2.0.2.

[victornoel]

@mgechev not exactly sure why, but since @angular/cli 1.0.0-rc0, this problem disappeared.
I tested with codelyzer 2.0.1 and both @angular/cli 1.0.0-beta.32.3 and 1.0.0-rc.0: the first shows me the error discussed here and the second does not!

[mgechev]

Thanks! I will close the issue when I have a chance to verify it's gone.

[mgechev]

Yes, it seems async pipe is not causing any issue in the latest release. @victornoel thanks for pointing your observation out!

[rthewhite]

I'm using codelyzer 2.0.1 and @angular/cli 1.0.0-rc0 and the problem seems to still exist for me? Anyone else still having issues with this?

[victornoel]

@rthewhite last time I checked, it worked with exactly both these settings.

Are you sure you configured your angular project exactly as it is in a ng new from latest angular cli? Because lots of things changed so it could be linked…

[connor4312]

I ran into the issue today with codelyzer 2.0.1. Here's an example of a failing usage:

<div *ngIf="(groups | async).length > 0"></div>

This issue is also reproducable with 2.0.0. Here's the version of our Angular components:

```
$ cat package.json | grep angular
"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/compiler-cli": "2.4.7",
"@angular/core": "2.4.7",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
...
````

[mgechev]

Codelyzer 3 should has this fixed.

[connor4312]

Awesome 😄 Not sure if we'll upgrade to a beta release but I'll let you know if we run into this again in 3.x

[brian428]

Minko, I'm using 3.0.1. Should this issue be fixed with that version, or was this something you were waiting to tackle in 4.x? I ask because I'm still getting errors related to async pipe, as well as properties in a component superclass not being found:

ERROR: C:/Developer/Projects/app/user.component.html[14, 45]: The method "toggleSettings" that you're trying to access does not exist in the class declaration.
ERROR: C:/Developer/Projects/app/user.component.html[10, 32]: The property "async" that you're trying to access does not exist in the class declaration.
ERROR: C:/Developer/Projects/app/user.component.html[11, 37]: The property "async" that you're trying to access does not exist in the class declaration.

If you think this shouldn't be happening, I can try to come up with a repro case.

[brian428]

Ah I think this is now slated for 4.x, correct? https://github.com/mgechev/codelyzer/issues/191#issuecomment-296697740

[mgechev]

Yes, I haven't published the changes yet because they require a bit more work. I need to migrate to latest version of ngast and align to the changes in the template compiler of Angular.