0

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.

VictorySaber
  • 3,084
  • 1
  • 27
  • 45
  • 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 Aug 19 '16 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 Aug 19 '16 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 Aug 19 '16 at 13:18
  • Possible duplicate of [Detecting typos in JavaScript code](https://stackoverflow.com/questions/31235963/detecting-typos-in-javascript-code) – Paul Sweatte Jul 03 '17 at 14:06

1 Answers1

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

Tom Smykowski
  • 25,487
  • 54
  • 159
  • 236