Codelyzer: Failing edge cases for noAccessMissingMemberRule

[Manduro]

Some cases below that fail the linting, while I think they should pass.

---

{{ userObjects[0]._id }}

get userObjects(): Array<{ _id: string }> {
  return [{ _id: 'uuid' }];
}



md5-dafaf93f688f1cabc37e11c4c14c96af



`
The property "menuContent" that you're trying to access does not exist in the class declaration.
`
While it is true that `menuContent` does not exist in the class declaration, it works as there is a local variable in the template so it should pass in my opinion.

---



md5-edb35c3a109bf266bde10c15d4d69b4d



```ts
this.form = this.formBuilder.group({
  arrayControl: [[0, 1, 2]],
  objectControl: [{ name: 'foo' }]
});

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

---

[mgechev]

Hey @Manduro, thanks for reporting this issue! I'll fix it as part of the next release.

[Manduro]

No problem. Thank you for building this awesome tool!

[mgechev]

@Manduro the fix is here. I will publish it together with a few other improvements in the next week or two.

[bradyisom]

Using 2.0.0-beta.3, I am still getting the second issue reported here. Specifically, referencing a local variable in the template.

[mgechev]

Would you share a demo where I can reproduce the problem?

[bradyisom]

Sure. Here is a simple project generated by angular-cli (1.0.0-beta.22-1):

https://github.com/bradyisom/codelyzer-173

The only addition is an angular material menu that matches the sample: https://github.com/angular/material2/blob/master/src/lib/menu/README.md

With this simple project, I get the following error by running ng lint:

src/app/app.component.html[5, 41]: The property "menu" that you're trying to access does not exist in the class declaration.  

[mgechev]

Codelyzer analyzes only the current file which means that it doesn't know if you have template references like ngForm, mdMenu, etc. available in the current position of the component tree. As workaround, there's a configuration property in .codelyzer.js, which allows you to set a list of pre-defined directives, by declaring their selector and exportAs identifier. Take a look at the section "Advance configuration" for further details.

Most likely this will not be required in future, now we're a bit restricted by trying to reuse tslint's error reporting mechanism.

[bradyisom]

Is that file used by angular-cli? I added that file and tried to add configuration that will fix this problem, but there was no visible effect. It looks like ng lint just executes tslint "src/**/*.ts. Does that go through the right code path where codelyzer can load this advanced configuration?

[mgechev]

@bradyisom create a file called .codelyzer.js in the root of your project (right where node_modules is) and add the following content:

module.exports = {
  predefinedDirectives: [
    {
      selector: 'md-menu',
      exportAs: 'mdMenu'
    }
  ]
};

[bradyisom]

Thank you. That is working for me now. I did have the .codelyzer.js in the right place. I got hung up on the example in the "Advanced Configuration" section of the documentation. Copying and pasting that example does not work. It did not have an = after module.exports and there was no error in the console. It was also not clear what I was supposed to use for the exportAs parameter. Thank you again for your help in getting this working.

[mgechev]

Oh, thanks for pointing this out. I wrote it on-the-fly, just before published the package. I'll fix the file right now.