Let’s be honest, where do you spend most of your time when creating Angular apps? Are you just a machine spitting out perfect code all the time or do you sometimes face these hard-to-debug problems, that stops your momentum and leaves you frustrated and wanting to throw your computer out the window? We have all faced these weird scenarios and felt the frustration.

In this post, I will go through a step by step guide to fix problems in Angular apps, that will make sure you get back on track as fast as possible.

Start with trying the easy and common fixes

Often, if you have a problem with something not showing or isn’t getting imported correctly, then the easy fix is just to restart the development server and try again.

Make sure you have an overview of what you are working with

I have the kind of personality where I just like to deep into stuff fast and then learn as a go along. Still, one thing I am always doing is I am making sure to get an overview of what I am working with before I start writing the code. Good resources for Angular development is to complete the tour of heroes tutorial on the official Angular docs. If you are more of a visual learner then Pluralsight videoes are a good source, eg. this video about fundamentals in Angular.

Get more knowledge with what you are struggling with

A common scenario for the stubborn developers is to keep trying to brute force it to work. If you can’t open a code lock, you should try to get the code instead of brute forcing the answer. Same goes with development. If you are getting stuck at a specific problem, put away the code for a while and educate yourself more in what you are struggling with. It sounds so simple and obvious but still, I see people sometimes mindlessly trying 100’s of random things, then the real solution is just to educate themselves better in what they are working with. That being said, I think it is completely okay to take action early after having gained an overview of what you are working with but you should educate yourself iteratively as you face specific problems.

Go back to the last time something worked and add changes in small increments

This is a common one when you are working with a new framework and something goes wrong without giving you are a clear error message. Here, the easiest solution is simply to utilize your version control and go back to the last time things were working and introduce the changes in small increments until it is not working anymore. Know you know where the problem is. To fix this, you might need to do get more knowledge with what you are struggling with.

Fix the problem using binary searching debugging method

If none of the above methods are not working that means you actually know what you are doing but for some reason, it is still not working. Also, it means that you have not developed something in small increments otherwise you would just go back to last time something worked and add the changes. Now it is fair to assume that, there might be a malfunction on the computer you are working on or a bug in the framework. Try to restart your computer to eliminate the first option (thank you IT support). If it is still not working, you need to do a binary search to locate the problem. This means that you in each increment try to delete or revert 50 % of the app until the error is gone. When the error is gone you do a binary search until you know exactly what is causing you problems.

An example of this is if you update the Angular version and your app stops working without a clear error message or location of where the error is. Here the easiest way to fix this is to do increments of deleting 50 % of the app code to locate where the problem. Without this, it would be very hard and complicated to find such a problem in a big Angular app.

Preventing a fire is better than fighting a fire

The easiest is if you mitigate the risk of facing hard-to-debug problems in the first place by:

1. Doing everything in small increments when possible. Sometimes you can’t eg. when upgrading the framework, and then you must jump to the binary search debugging method
2. Use typesafe languages and make sure everything is statically checked at compile time. Catching problems at compile time is easier to fix than at runtime
3. Use static code analysis tools like TsLint and SonarCube to ensure that your code is clean. The cleaner the code the fewer errors will be introduced
4. Make sure all functionality is covered by tests. That way you will also get an automatic runtime validation that your app is working on every change
5. Make sure that all code checked in is being reviewed by another peer as this helps to catch problems early

Conclusion

In this post, we looked at how to debug Angular apps. We went through the steps to fix hard-to-debug problems, which is eg. a problem without an obvious error message. First, you make sure you have an overview of what you are working with and as you work with specific problems you should educate yourself in them. You should do everything in small increments, so you can easily go back to the last time something was working and then add your changes from here. Sometimes it is not possible to do something in small increments and you might face a problem you need to solve with the binary search debugging method. This method is about excluding half of the source code by deleting or reverting until you locate where the problem is coming from.

That being said, prevention by building quality in the development process is better than debugging, so we also looked at a couple of practices you should follow to mitigate the risk of introducing bugs in the first place.