Codelyzer: no-access-missing-member and extended classes

[robisim74]

Hi Minko,

I don't know if the following problem is related to #190, but if I set the property on the subject to true (as recommended) when I have an extended class I get warnings.
For example:

@Component({
    templateUrl: 'signin.component.html'
})

export class SigninComponent extends Signin {
    constructor(public router: Router, public authenticationService: AuthenticationService) {
        super(router, authenticationService);
    ...
    }
}

export class Signin {

    model: any = {};

    errorMessage: string = "";

    constructor(public router: Router, public authenticationService: AuthenticationService) { }
    ...
}

I get the following warnings:

app/account/signin.component.html[11, 59]: The property "model" that you're trying to access does not exist in the class declaration.
app/account/signin.component.html[10, 71]: The property "errorMessage" that you're trying to access does not exist in the class declaration.

Packages:
"codelyzer": "2.0.0-beta.3",
"tslint": "4.0.2",
"typescript": "2.0.10"

Note that up to codelyzer 2.0.0-beta.1 I didn't get any error.

Thanks,

Roberto

[mgechev]

Since recently Angular didn't support metadata for inheritance so this issue was low priority. Probably I will work on it as part of the next release.

[aitboudad]

@mgechev I think you missed https://github.com/angular/angular/commit/f5c8e09 since 2.3

[mgechev]

Yes, I said "didn't", this is the reason the issue is still open :-)

[karlhiramoto]

Is there any workaround to ignore these?

[mgechev]

I'll work on this during the weekend. Hopefully, by Monday we'll have these working:

Imported base class

// base.ts
class Base {
  bar;
}

// child.ts
import { Base } from './base';

@Component({
  selector: 'child',
  template: '{{ bar }}'
})
class Child extends Base {}

Base class declared in the same file

class Base {
  bar;
}

@Component({
  selector: 'child',
  template: '{{ bar }}'
})
class Child extends Base {}

[robisim74]

@mgechev Thanks!

[asadsahi]

@mgechev not sure if this has to be part of this issue. I have disabled tslinting in html for the whole file:

But still getting this error:

The property "message" that you're trying to access does not exist in the class declaration.

Note: message is a base class property of this component.

So, shouldn't disabling override any other check?

[saithis]

@asadsahi You have to disable the rule/tslint in the component (typescript file), not the template.

[asadsahi]

@saithis Thanks. sorted. :)

[mgechev]

Excuse me for the delay. There were a lot of things on my plate. I'll try to come up with a fix in the next a couple of days/week.

[wlwg]

@mgechev I'm having this issue now. Any progress on this?

[guojenman]

@mgechev @wlngwang as a workaround while this issue is resolved, you can use this['your_prop_name'] in your template. Not ideal, but it gets the warning out of the way for now.

class Base {
  bar;
}

@Component({
  selector: 'child',
  template: '{{ this["bar"] }}'
})
class Child extends Base {}

[wlwg]

@guojenman Thanks. Another workaround could be setting up a proxy property in the child class to return the desired property.

[Shahor]

I'm doing this (redeclaring the var) but it's quite annoying :(

[mgechev]

I've been working on ngast for better metadata extraction.

Tomorrow I'll reuse the TypeChecker with program aware walkers, to find the base classes and all symbols. Setting it as a todo item in Things! 👨‍💻

Related to https://github.com/mgechev/codelyzer/issues/64.

[mpetkov]

What is the tslint property to disable this check for time being?

[KhodeN]

What is the tslint property to disable this check for time being?

no-access-missing-member?

[adamgorIBM]

@guojenman your workaround worked for me. Was not just a property but a method.

class Base {
  bar(arg){return 'x'};
}

@Component({
  selector: 'child',
  template: '{{ this["bar"](arg) }}'
})
class Child extends Base {}

[mgechev]

Good news! Just pushed code which introduces support for extended classes. You can find it here.

I will release 2.0.1 once I make sure everything works properly.

[mgechev]

Btw, if you see any test cases which may fail, please comment in the issue.

[mgechev]

And here are some bad news https://github.com/Microsoft/vscode-tslint/issues/70.

Since these rules require type checking, they can be used only via the CLI because the VSCode tslint extension doesn't have support for them. Most likely I'll releases the new features under version 3.0.0-rc.0.

[aitboudad]

with the next version of typescript 2.3 I think we can use https://github.com/angelozerr/tslint-language-service to solve that issue

[mgechev]

I'd love to hear your opinion: do you prefer to release this fix as 3.0.0-rc.0 and get available now but only through CLI, or you prefer to wait and use it in VSCode?

[KhodeN]

CLI

[maxime1992]

@mgechev sooner the better so our lint can pass on CI with that rule
So CLI I guess :smile:

[victornoel]

@mgechev same as @maxime1992, the sooner the better, and like this we will be able to report problems sooner too if we find some ;)

[mgechev]

Alright, it's out in [email protected]. I'll work on beta.1 in the next few days, to make the metadata collection smarter.

[Ancoron84]

Looks promising, I tried the new beta 4 and all the warnings related to this topic are gone :)

Great Job

[leocaseiro]

Temporary, another solution is use on your app.component.ts:

/* tslint:disable:no-access-missing-member */

and

/* tslint:enable:no-access-missing-member */

[xnnkmd]

@mgechev It seems this problem persist in newer versions as well. I still run into this problem with angular cli 1.0, codelyzer 2.1.1 and ts-lint 4.5.1 (unfortunately, I can't upgrade ts-lint to the newst 5.xx version because of https://github.com/angular/angular-cli/issues/5848).

[mgechev]

Yes, the problem exists in 2.1.1, as I mentioned it was scheduled as part of the 3.0.0 release. You can either disable this rule completely or only for this specific file where the lack of inheritance support fails.

[pgrm]

upgrading from 3.0.0-beta.4 to 3.0.0 we seem to be getting this issue again. Is it the same or it just looks very similar?

[asadsahi]

having same issue still with 3.0.0.

[pgrm]

To be clear, the issue was resolved for me when I updated to 3.0.0-beta.x the betas were fine, the final release now is bringing it back to me

[mgechev]

Yes, ngast support is pushed for 4.0.0. Because of the breaking changes introduced by tslint@5 I had to push a new major release. You can either set a specific version (i.e. 3.0.0-beta.x) or if it's more convenient for you, I can push 3.0.0-beta.x as 4.0.0-beta.x.

[asadsahi]

@mgechev

I can push 3.0.0-beta.x as 4.0.0-beta.x

What do you mean by that?

[mgechev]

I have to move the 3 release (i.e. the support for inheritance) as codelyzer 4, because in the meantime, while making 3 stable, tslint broke their backwards compatibility and I had to release support for tslint 5 as codelyzer 3.

What I can do is to release the support for inheritance as codelyzer 4.0.0-beta.0, if it's more convenient for you.

[asadsahi]

Thanks @mgechev

4.0.0-beta.0 makes sense to me.

[mgechev]

Ok, later this week I'll align to the changes introduced by 4.0.2 and push it.

[gund]

BTW it also throws when referencing local template variable and reading different value (for ex. directive):

<input ngbDatepicker #d="ngbDatepicker">
<button (click)="d.toggle()">Toggle date picker</button>

Results in error:

ERROR: src/em/components/calendar/calendar.component.html[10, 61]:
The method "d" that you're trying to access does not exist in the class declaration.

[CSchulz]

I did run into the same issue and would like to try the 4.0.0-beta.

Is there no release yet?

[guojenman]

@CSchulz Just disable where needed for now by putting the below comment at the top of your file

// tslint:disable:no-access-missing-member

[thinkingmedia]

I found that adding an interface to the base class that declares the shared properties also squashes this warning.

interface IControl {
      name: string;
}

@Component({
    selector: 'control'
})
class Control implements IControl {
    @Input()
    public name: string;
}

@Component({
   selector: 'button',
   template: '<span>{{name}}</span>'
class Button extends Control {
}

I'm not sure why, but seems to fix other auto-complete issues in IDEs as well.

[mwent-cray]

What @thinkingmedia mentioned doesn't seem to work when you import the base class.
Not even when you create an interface that extends the original one in another file.

[CSchulz]

@mgechev Can we support you with implementation? The branch 4.0.0-beta.4 seems to be not up to date, right?

[abalad]

"codelyzer": "~3.0.1": This arises the same problem.

[rafiwardak2003]

This problem is back in 3.x.x (3.0.0 and 3.0.1). I had to revert back to 3.0.0-beta.0 to get it to work.

[emilio-martinez]

@mgechev is there another issue where you're tracking support for inheritance on a stable release? Just wondering since this particular thread is closed.

[mgechev]

There won't be support for inheritance and it's very likely the no-access-missing-member rule to be removed in version 4. The language service already handles this.

[pgrm]

@mgechev sry, could you please elaborate on what you meant with The language service already handles this. and There won't be support for inheritance... - does it mean that codelyzer won't need to support inheritance because it's only needed for no-access-missing-member and the language service already has support for that?

[mgechev]

@pgrm there are a few codelyzer rules which provide static analysis for errors that have very tight intersection with ones that are supposed to be caught compile-time by the Angular compiler, and reported by the language service.

codelyzer aims to provide linting for style errors which can be found by providing a "shallow analysis" (one with no-type checking), only on top of the current file + external template/style.

[CSchulz]

As far as I know there is no implementation in the language service right?

Would you provide some support if somebody would try to migrate it?

[mgechev]

There's no migration involve - just install the language service and everything works.

Regarding failures of the build when there's a missing property - just run the Angular's AoT and it will throw an error.

[CSchulz]

Ah yeah right! We have already AoT in our build process.

Thanks!

[elwinarens]

Same issue with ^3.1.1. Reverted back to ~2.0.0 to get rid of the errors.

[schmitch]

Actually I'm on codelyzer 3.1.2 and still getting that error.

[CSchulz]

Use Angular's AoT or revert back to 2. There will be no fix: https://github.com/mgechev/codelyzer/issues/191#issuecomment-307876588

[leocaseiro]

@mgechev sorry If I misunderstood, but I'm still having issues with extended classes.

It seems working fine for Classes, but not for templates inline and external .html with these versions:

@angular/*: 4.3.4
@angular/cli: 4.3.4
@angular/language-service: 4.3.4
codelyzer: 3.1.2
[email protected]

I can use the property in the extended class, however, if I try to access in the template, the command:

ng lint --type-check

Returns the error:

The property "config" that you're trying to access does not exist in the class declaration.

Eq:

export abstract class MyParentClass {
    public config: string = 'name';
}

@Component({
    selector: 'my-child-component',
    template: `<h1>{{config}}</h1>` // The property "config" that you're trying to access does not exist in the class declaration.
})
export class MyChildComponent extends MyParentClass {
     method() {
          this.config = 'new name'; // no complains
    }
}

I wonder how would I run ng-lint with AOT?

Thanks

[CSchulz]

@leocaseiro You don't run lint with AoT, you run a seperate AoT build which comes up with such errors.

[leocaseiro]

Thanks @CSchulz
I thought so.

My question is: How can I pass my lint, though?

[CSchulz]

There won't be support for inheritance and it's very likely the no-access-missing-member rule to be removed in version 4. The language service already handles this.

https://github.com/mgechev/codelyzer/issues/191#issuecomment-307685909

You can disable the rule and rely on the AoT build.

[leocaseiro]

I see, I have to disable on tslint:

{
    "rules": {
        "no-access-missing-member": false
    }
}

@CSchulz thanks for that!!!!

[MaZderMind]

The AOT-Build does not catch usage of inexisting properties in @angular/cli 1.2.6 / @angular/compiler-cli / ^4.3.

[CSchulz]

~Could be a bug with Angular itself. I am running 4.2 and there it is found. You should report this in the angular repository with an example.~

I had checked it with @angular/cli 1.3.0 / @angular/compiler-cli / 4.3.4 and it is working.

ERROR in $$_gendir/app/app.component.ngfactory.ts (26,31): Property 'test' does not exist on type 'AppComponent'.

[StefH]

@leocaseiro The problem with disabling the rule is that you lose this exact validation.

So is there a codelyzer version (and tslint combination) which solves this issue ? (FYI: I'm using this in a WebpackStarter project, not in a Angular CLI project)

[leocaseiro]

@StefH, you can keep it in your tslint.json, but add the comments to pages that are extended https://github.com/mgechev/codelyzer/issues/191#issuecomment-295092702

[StefH]

@leocaseiro

The error message is pointing to a html file.

Example:

ERROR: src/app/example/example.component.html[3, 16]: The property "myProperty" that you're trying to access does not exist in the class declaration.

So where to put the lines ?
/* tslint:disable:no-access-missing-member */
/* tslint:enable:no-access-missing-member */

[StefH]

Now both issues are closed? Please re-open one !

[leocaseiro]

Try on src/app/example/example.component.ts

[emilio-martinez]

@mgechev just to double check, you'll be removing no-access-missing-member in the future, correct?

[pgrzywaczcic]

I have this issue in my project too:
codelyzer: 3.1.2
tslint: 5.3.2
angular/cli: 1.4.2

EDIT: so the solution is to disable no-access-missing-member in tslint config as it shouldn't be used anymore - nvm then

[Dzivo]

@pgrzywaczcic

disabling is not a solution for us who are not using angular cli.

[wKoza]

@Dzivo , Angular CLI isn't necessary. You just should use the Language Service form Angular and disable this rule.

[redayoub]

I have the same issue for:

"@angular/core": "8.0.0",
"codelyzer": "4.5.0",
"@angular/cli": "8.0.2",
"tslint": "5.11.0",

[yuri1969]

Have you tried the dirty workaround of prepending a disable directive as the component's first line?

// tslint:disable:no-access-missing-member