Codelyzer: check-pipe totally broken

[Martin-Wegner]

Since 3.1.2 check-pipe is totally broken.

<div *ngIf="countingPoints$ | async as countingPoints; else countingPoinsAreLoading">
  {{countingPoints}}
</div>
<ng-template #countingPoinsAreLoading>loading</ng-template>

ERROR: XXX.component.html[2, 13]: The pipe operator should be surrounded by one space on each side, i.e. " | ".

[mgechev]

Thanks for reporting the issue. There are two issues in this case:

• The warning is reported for code having a valid style.
• The warning is reported on incorrect location.

I'll push a fix in upcoming releases.

[willgm]

Similar error here:

ERROR: /home/willgm/proj/jexia-webapp/src/app/project/project-features/project-features.component.html[1, 25]: The property "async" that you're trying to access does not exist in the class declaration.

For this line:

<div *ngIf="(currentProject | async).ui.features as features">

[mgechev]

@willgm not a related issue. Please, take a look at the search and also https://github.com/mgechev/codelyzer/issues/264.

[willgm]

@mgechev, sorry, but I can't see how this error is related to this issue. Can you explain?

I searched a little more, looks like there are other issues more likely to math the errors above: #190 and angular/angular-cli/issues/6554

This issue appeared after I updated from 3.0.1 to 3.1.0 or 3.0.2:

~/proj/jexia-webapp [work ~2 *] » npm i -D [email protected]                              willgm@localhost
+ [email protected]
updated 1 package in 4.362s
---------------------------------------------------------------------
~/proj/jexia-webapp [work ~2 *] » npm run lint                                          willgm@localhost

> [email protected] lint /home/willgm/proj/jexia-webapp
> ng lint --type-check


ERROR: /home/willgm/proj/jexia-webapp/src/app/project/project-features/project-features.component.html[1, 2]: The property "async" that you're trying to access does not exist in the class declaration.
ERROR: /home/willgm/proj/jexia-webapp/src/app/project/project-features/project-features.component.html[55, 34]: The property "async" that you're trying to access does not exist in the class declaration.

Lint errors found in the listed files.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint: `ng lint --type-check`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/willgm/.npm/_logs/2017-07-05T18_17_21_680Z-debug.log
---------------------------------------------------------------------
~/proj/jexia-webapp [work ~2 *] » npm i -D [email protected]                              willgm@localhost
+ [email protected]
updated 1 package in 4.294s
---------------------------------------------------------------------
~/proj/jexia-webapp [work ~2 *] » npm run lint                                          willgm@localhost

> [email protected] lint /home/willgm/proj/jexia-webapp
> ng lint --type-check



All files pass linting.

[wKoza]

@willgm Perharps, you should simply drop rule no-access-missing-member ?

[willgm]

@wKoza, now I got it, thanks! :tada:

[brian428]

Does anyone know if there's a way to disable this rule just for the templates that have the problem? I'd like to avoid just turning off the whole rule, since it only seems to fail in some limited situations (async pipe, inherited properties, etc.).

[mgechev]

You can disable the rule for the entire file by /* tslint:disable:rule1 rule2 rule3... */. In case the warning is in an external template, place the comment in the component file which references it.

[brian428]

Thanks, I was thinking it needed to go in the actual HTML somehow. I'll try it on the component itself.

[BorntraegerMarc]

Same thing in an HTML. This works:

<paper-item class="menu-item mi-new-task komed-menu-item" (click)="addNewTask()">{{ 'task.addTask' | translate }}</paper-item>

this generates an error:

<paper-item class="menu-item mi-new-task komed-menu-item" (click)="addNewTask()">
    {{ 'task.addTask' | translate }}
</paper-item>

this is the error: The pipe operator should be surrounded by one space on each side, i.e. " | ".
do you know when you can release a fix for this? My CI is broken because of this...

[mgechev]

You can disable the rule for now until we fix the issue.

[BorntraegerMarc]

How do I disable it?

[wKoza]

you should simply drop option check-pipe in your tslint file

[BorntraegerMarc]

@mgechev could you publish an update with this guy so we can get a clean CI build again? :)

[mgechev]

Yes, I'll do over the weekend. Will also do some dogfooding to verify that everything is fine.

[BorntraegerMarc]

@mgechev the issue seems not to be resolved for me:

D:\projects\komed-health-web>ng lint
ERROR: src/app/chat/chat.component.html[22, 43]: The pipe operator should be surrounded by one space on each side, i.e. " | ".

D:\projects\komed-health-web>ng --version
@angular/cli: 1.4.2

this is the HTML code:

<paper-item>
    {{ 'chat.switchToDe' | translate }}
</paper-item>

from package.json:

"codelyzer": "3.2.0",

[wKoza]

Closed and reported to #416