Bug: angular-whitespace issue in some *.ts files #25

[robvaneck]

Hi,

im using

"angular-tslint-rules": "^1.4.1",
"codelyzer": "^4.4.2",
"tslint": "^5.11.0",

(complete list)

  "devDependencies": {
    "@angular/cli": "1.7.2",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~9.4.6",
    "angular-tslint-rules": "^1.4.1",
    "codelyzer": "^4.4.2",
    "cors-anywhere": "^0.4.1",
    "http-proxy": "^1.16.2",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "^5.11.0",
    "typescript": "~2.7.2"
  }

when i run ng lint I get around 20 the same errors on different files about whitepace interpolation... but these files are controllers.. I think it is a bug.

ERROR: /Users/username/repos/repo/src/app/somemodule/some.component.ts[43, 1]: Missing whitespace in interpolation end; expecting {{ expr }}

my components are as simple as below... but tslint thinks i should have extra }} at the end.. (as if it is a template?)
https://ibb.co/nzr5wy

import { Component, Input, OnInit } from '@angular/core';
import { Activity } from '../../_types/models/activity';

@Component({
  selector: 'card-activity',
  templateUrl: './card-activity.component.html',
  styleUrls: ['./card-activity.component.css']
})
export class CardActivityComponent implements OnInit {

  @Input() activity: Activity;

  constructor() {
    //
  }

  ngOnInit(): void {
    //
  }
} // <-- the problem exists here in some components... I see red line and tslint balloon .. when I auto fix tslint... it adds extra }} ... which is illegal typescript :P

Note: when i add "angular-whitespace" false to my rules... the error is not showing anymore, so I really think it is related to angular-tslint-rules / codelyzer ?

  "rules": {
    "angular-whitespace": false
}

complete tslint.json

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "extends": [
    "angular-tslint-rules"
  ],
  "rules": {
    "array-type": [
      true,
      "array"
    ],
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "component-selector": false,
    "directive-selector": [
      true,
      "attribute"
    ],
    "i18n": false,
    "newline-per-chained-call": false,
    "no-angle-bracket-type-assertion": false,
    "no-empty": [true, "allow-empty-catch", "allow-empty-functions"],
    "no-inferrable-types": false,
    "no-implicit-dependencies": [
      true,
      "dev"
    ],
    "no-null-keyword": false,
    "quotemark": [
      true,
      "single",
      "avoid-escape",
      "avoid-template"
    ],
    "trackBy-function": false,
    "newline-before-return": false,
    "variable-name": [
      true,
      "check-format",
      "allow-pascal-case",
      "allow-leading-underscore",
      "ban-keywords"
    ]
  }
}

[robvaneck]

Note:
also tried with downgraded npm modules:

    "angular-tslint-rules": "^1.4.1",
    "codelyzer": "^4.1.0",
    "tslint": "^5.9.0"

same results

[mgechev]

You can get the same version of tslint with both ^5.9.0 and ^5.11.0. Try 5.9.0 without ^.

[robvaneck]

@mgechev thank you. I removed the caret, did npm install... checked the package.json of tslint. It is 5.9.0 now..

ran ng lint ... but still i get several:

ERROR: path/to/my/file/component.ts[66, 31]: Missing whitespace in interpolation end; expecting {{ expr }}
ERROR: path/to/my/file/component.ts[70, 25]: Missing whitespace in interpolation end; expecting {{ expr }}
ERROR: path/to/my/file/component.ts[74, 8]: Missing whitespace in interpolation end; expecting {{ expr }}

[robvaneck]

I also just tried to fix the npm versions to:

    "angular-tslint-rules": "^1.4.1",
    "codelyzer": "4.1.0",
    "tslint": "5.9.0",

npm install

check package.json versions inside node modules.. yes, correct versions..

ran ng lint

Could not find implementations for the following rules specified in the configuration:
    prefer-while
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
       
ERROR: path/to/my/file/component.ts[66, 31]: Missing whitespace in interpolation end; expecting {{ expr }}
ERROR: path/to/my/file/component.ts[70, 25]: Missing whitespace in interpolation end; expecting {{ expr }}
ERROR: path/to/my/file/component.ts[74, 8]: Missing whitespace in interpolation end; expecting {{ expr }}

[Shinigami92]

The problem is that it complains about the ts file but the error is in the html file

[robvaneck]

@Shinigami92 you're right!

examples like this we're causing it:

{{ model.param || '-'}} 
{{ model?.paramTimestamp ? (model?.paramTimestamp | date: 'short') : '-'}}

but the bug remains that the error should point to the correct file

[Xample]

Same issue here, present on both 5.9.0 and 5.11.0

<ng-template #empty>
    {{placeholder}}
</ng-template>

Fails, while the code below works

<ng-template #empty>
    {{ placeholder }}
</ng-template>

[YoeriNijs]

Yes, in my case, the message was caused by an error in the related view. I solved it by replacing {{ var}} with {{ var }}.

[NarHakobyan]

I have the same issue, is there any news about this?

[Xample]

@NarHakobyan just add the spaces for now… afaik it is still not solved

[mgechev]

This could be a regression in tslint, vscode-tslint, or codelyzer. I haven't had time to look at it.

Until we resolve the problem, I'd recommend you to disable the angular-whitespace rule.

[joseluisq]

Confirmed the @Xample solution using white spaces solves the issue:

• codelyzer: ^4.4.3
• tslint: ^5.10.0

<ng-template #empty>
  {{ placeholder }}
</ng-template>