Codelyzer: "angular-whitespace" rule false-positive (when using string with pipe, ngx-translate)

[Ritzlgrmft]

My code is par example:

<button>
  {{ "button.label" | translate }}
</button>

This is complained by codelyzer: The pipe operator should be surrounded by one space on each side, i.e. " | ".
However, if I add a span, codelyzer is satisfied:

<button>
  <span>{{ "button.label" | translate }}</span>
</button>

The same problem was already reported in #415. It was fixed in release 3.2.2, but in 4.0.1, it happens again.

[FabienDehopre]

I have this issue even when using version 3.2.2
For me it also happens when not using string:

<div class="ui-fluid input-wrapper">
      <div [class.required]="required" class="ui-g">
        <div class="ui-g-12 input-wrapper-label">
          <label *ngIf="label" [htmlFor]="inputId" class="opw-label">{{ label | translate:lang }}</label>
        </div>
        <div class="ui-g-12 input-wrapper-control">
          <ng-content></ng-content>
          <div *ngIf="hasClientErrors && !hasServerWarningsOrErrors" class="opw-error">
            <p *ngIf="hasRequiredError">{{ 'ERROR.REQUIRED' | translate:lang }}</p>
            <ng-content *ngIf="hasOtherErrors" select="p.error"></ng-content>
          </div>
          <div *ngIf="hasServerWarnings" class="opw-warning">
            <p *ngFor="let warn of errors.getWarningItems(path)">{{ warn.message | translate:lang }}</p>
          </div>
          <div *ngIf="hasServerErrors" class="opw-error">
            <p *ngFor="let error of errors.getErrorItems(path)">{{ error.message | translate:lang }}</p>
          </div>
        </div>
      </div>
    </div>

The tslint report marks all the pipe usage as invalid albeit they are valid

[FabienDehopre]

BTW, the error happens randomly with 3.2.2.
I made a change (removed an empty line) and the error did not happen.

[FabienDehopre]

Any news about this issue?
It still happens on the latest release (4.0.2)

[mgechev]

Here are the changes from 4.0.2.

[FabienDehopre]

OK. I read the changelog for the 4.0.2.
My question was when would this issue (related to the check-pipe) be solved?

[jeneg]

Got the same issue on 4.0.2. @mgechev Is it going to be fixed?

[mgechev]

Let's drop the check-pipe as @wKoza suggested https://github.com/mgechev/codelyzer/issues/460.

[slimlime]

I had an issue with angular-whitespace or one of the fixers that seemed to identify angular moustache templates in my typescript files (no templates) and

import {
  FormControl,
  FormGroup,
  FormBuilder,
  Validators,
  FormArray
} from "@angular/forms";

became

imp; }}t{{ { {  }}{  }} {  }} {  }}
  }}ormArray,
  FormBuilder,
  FormGroup,
  Validators;
} from; '@angular/forms';

I had ridiculously run the tslint --fix autofix while working out how to use tslint and ended up replacing even more }} 🤣.

I'm still trying to track things down but it seems to be resolved at the moment _after I looked more closely and removed the check-pipe I had thoughtlessly copied here:_

    "angular-whitespace": [
      true,
      "check-interpolation",
      "check-pipe", // << oops remove.
      "check-semicolon"
    ],