false positives with typescript 2.1.4

[guojenman]

Bug Report

• Codelyzer version: 2.0.0-beta.1
• TSLint version: 4.0.2
• TypeScript version: 2.1.4
• Running TSLint via: CLI/ Visual Studio / ts-loader

Note: TSLint passes if i remove codelyzer rules & codelyzer from rulesDirectory

TypeScript code being linted

In code below, it's complaining about missing whitespace after equals (=) in the string literal

let offset = 10;
let result = `<path d="M${offset},${offset}/>`;

In code below, it's complaining about missing whitepsaces afer coma (,) inside of the regexp
const hasPercent = /= {0,1}(\.{0,1}\d+)/g.test(this.data.join(','));

In code below, it's complaining about missing semicolon at class closing tag ( } ). It stops complaining if i remove constructor.

import { Component } from '@angular/core';
@Component({
  template: `
    <router-outlet></router-outlet>
  `
})
export class AppBodyComponent {

  constructor(
  ) {}
}

with tslint.json configuration:

{
    "rulesDirectory": [
        "node_modules/codelyzer"
    ],
    "rules": {
        "directive-selector": [true, "attribute", "jm", "camelCase"],
        "component-selector": [true, "element", "jm", "kebab-case"],
        "use-input-property-decorator": true,
        "use-output-property-decorator": true,
        "use-host-property-decorator": true,
        "no-attribute-parameter-decorator": true,
        "no-input-rename": true,
        "no-output-rename": true,
        "no-forward-ref": false,
        "use-life-cycle-interface": true,
        "use-pipe-transform-interface": true,
        "pipe-naming": [true, "camelCase", "jm"],
        "component-class-suffix": true,
        "directive-class-suffix": true,
        "import-destructuring-spacing": true,
        "templates-use-public": true,
        "no-access-missing-member": true,
        "invoke-injectable": true,

        "class-name": true,
        "comment-format": [ true, "check-space" ],
        "indent": [ true, "spaces"],
        "no-duplicate-variable": true,
        "no-eval": true,
        "no-internal-module": true,
        "no-trailing-whitespace": true,
        "no-unsafe-finally": true,
        "no-var-keyword": true,
        "one-line": [ true, "check-open-brace", "check-whitespace"],
        "semicolon": [ true, "always" ],
        "triple-equals": [ true, "allow-null-check" ],
        "typedef-whitespace": [ true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "variable-name": [ true, "ban-keywords" ],
        "whitespace": [ true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ]
    }
}

[mikhailmelnik]

Not sure my issues are the same but I would say it looks like false positive too.

For the following template (based on ng-boostrap popover example)

<template #popContent>Hello</template>
<a ngbPopover]="popContent">click me</a>

ng lint says The property "popContent" that you're trying to access does not exist in the class declaration.

And for the following statement in template

{{t.errorData.errorMessages[0].message}}

ng lint says The property "message" that you're trying to access does not exist in the class declaration. while it is absolutely correct and even intellisense displays message option if I move this code to TS file.

[mgechev]

@mikhailmelnik your issue is duplication of #179 and fixed but not yet published.

I believe I worked on {{t.errorData.errorMessages[0].message}} as well, not sure if it is in beta.1 yet but I'll verify and if it isn't there I'll work on it. What version are you using?

@guojenman your issues are not related to codelyzer but seems related to tslint. It is weird that you're no longer getting errors with codelyzer. I'll still check and see what's wrong.

[mikhailmelnik]

@mgechev it is 2.0.0-beta.1, installed with angular-cli v1.0.0-beta.22

[guojenman]

Thanks @mgechev. Weird indeed. I've created minimum reproducible project, which I should've included with the original bug report, but attached below instead.

after npm install,
if you run "npm run lint", it will fail.
if you run "npm run lint-no", which is not using codelyzer in rulesDirectory, then works.

codelyzer-lint.zip

btw, loving codelyzer.

[mgechev]

@guojenman thanks for this! It's really helpful!

[mgechev]

@mikhailmelnik the issue is fixed here 20ce61a.

[JohannesRudolph]

I'm seeing another instance of this: The method "popover" that you're trying to access does not exist in the class declaration.

        <div class="button-row" [ngbPopover]="network.error"  popoverTitle="Error"  #popover="ngbPopover" (document:click)="popover.close()">
          <mst-confirm-delete-button size="small" (confirmedDelete)="delete(network, popover)" [isDeleting]="network.deleteOp | subscriptionActive"><i class="fa fa-trash"></i></mst-confirm-delete-button>
        </div>

Using:
"codelyzer": "^2.0.0",
"tslint": "~4.4.2",

[almothafar]

I'm using:

"codelyzer": "~3.0.1",
"tslint": "~4.5.1",

But still getting the same issue!