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 angular/angular@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 #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]

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: #191 (comment)

[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.

#191 (comment)

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 #191 (comment)

[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