Angular - how to detect typos in object names or other simple, common issues

Question

I am new to Angular, and just hit a problem with an example I am following due to a mistake I had made in my filter. I typed the name of a property incorrectly.

<tr ng-repeat="product in vm.products  |  filter: vm.searchInput.ProductName">

when the property name is actually camelCased.

filter: vm.searchInput.ProductName

(My background is more C# than JS so a common mistake I make)

When the application ran it failed, silently. It was down to me to guess what I had done wrong.

My question: is there a compiler plugin or a browser plugin that would detect this mistake? I am uneasy about using Angular to build large web-based projects if a simple typo is enough to break the webpage.

With MVC I have intellisense to help me with the model, and a YSOD (Yellow Screen Of Death) to point me at the line that is err'ing.

UPDATE: I saw nothing in Chrome's Console to tell me of the error. Should I have seen something?

UPDATE: Because Angular is being used more and more for larger projects (as opposed to "a quick bit of javascript to make a page do something"), and websites/apps are to be designed with Angular in mind (the paradigm shift from JQuery) I am expecting there to be something in Angular to catch issues like this otherwise it seems to me larger projects would be high risk.

Javascript it self many times failed without any obvious reason on website. Good thing to do is always keep open your browser console. In 90% time it give you nice hint what happend. But yea if you compare JS to Java or even C# it can be harder for debug — Andurit
– Andurit, Commented Aug 19, 2016 at 12:52
In this case there should be no errors in console. If you try to access a property that doesn't exist in an object, it returns undefined. So yeah, a silent error. — Jean Lourenço
– Jean Lourenço, Commented Aug 19, 2016 at 13:02
Are you using the compressed or uncompressed version of angular? The uncompressed version prints more detailed error messages to the console if you have an error. But in your case if you type a wrong property name on an object is still valid in JS. It evaluates to undefined — zfor
– zfor, Commented Aug 19, 2016 at 13:18

Tom Smykowski · Accepted Answer · 2020-06-28 17:43:54Z

0

You can write custom ESLinter rules. Other solution is to use Assistant for Visual Studio Code. It allows you to write your own rules for bad code and display information while coding. You can read about it here:

“8 Visual Studio Code Assistant rules for nasty Angular bugs” by Tomasz Smykowski https://link.medium.com/MjpK9TrUG7

answered Jun 28, 2020 at 17:43

Tom Smykowski

26.2k57 gold badges167 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - how to detect typos in object names or other simple, common issues

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related