Error Debugging in Angular
Learn the differences between runtime vs compile errors and practice debugging strategies.
Debugging Errors in Angular
Compile-time: the time period in which you, the developer, are compiling your code
Run-time: the time period which a user is running your piece of software.
Compile Errors
When serving an Angular application in our dev environment, every time we make a change to our files our code is re-compiled which converts our typescript into JS that the browsers can read.
A compiler error happens when you try to compile the code, the compiler throws an error to alert you to something which will not compile, and therefore cannot be run.The following are some cases that can result in compilation errors:
improper syntax
typechecking errors
Incorrectly set relative paths
Run time Errors
Run-time are those that are detected when the program executes. The following are some causes that can result in run time errors:
division by zero
running out of memory
network errors
Error Guide
Lesson Angular Error Guide
Overview
Fixing errors is a large part of software development. In fact, some development jobs are just about fixing errors . This guide is meant to assist you thought process of fixing errors, as well as expose you to common errors and chrome Dev Tools. Solving errors is arguably the most important part of coding.
DON’T GET FRUSTRATED. Errors are good. Yes, error messages are good. They communicate what is wrong with our code. The worst case is when your code doesn’t work how you expect and you are not getting any errors. Be glad you have an error message.
SEE RULE #1. Seriously see rule #1. Getting frustrated at the computer or yourself is going to make the problem worse and a waste of time and energy.
Start at the top of the error messages. Sometimes you have a massive list of error messages. That wall of red text can be quite overwhelming but we want to start at the top of our error message list. We start at the stop because a simple syntax error could cause all the the other errors, an unpaired: “ ( { usually lead to a massive list of errors. You always start at the top because that first error can be causing all the other errors.
Read the error message. Generally it will tell us what type of error we have and its location. After you read the message think what, how, and why is this error message coming up. Why would this variable be undefined? What code did I just change? How is this type of error thrown? Recommended Anatomy of an Error Message if you cannot read an error message type and find the file and line it is on.
Lastly, google the error message. When googling an error message we have to remove the part that is specific to our our, like variables names. So we would google the error message to see what typical leads to this type of error.
Runtime Errors vs Compile Errors
Up to this point anything you console logged was printed in your terminal in Cloud9. That will no longer happen now because our javascript code is running in the browser where our application is serving. When starting your angular app just because your app compiles and serves does not mean the code will run. Compiled successfully, means all our typescript code was translated into javascript, no typing errors were found and it was able to compile, which means build all the necessary files for our angular app. Remember the code you write is not what is run by the computer. When running our angular application, console.logs and other errors will now appear in the browser’s console not the Cloud9 terminal, these are Run Time Errors. In short compile errors in the Cloud9 Terminal and run time errors in the console of the browser window where the app is running.
Chrome Console To open the chrome’s browser console on Windows Ctrl + Shift + J. On Mac: Cmd + Option + J or right click on the chrome page and follow the below gif. This will open chrome’s dev tools. Chrome is mandatory, and considered industry standard for its Developer Tools. Different browsers have different tools. The console will be one of your most important debugging tools.
Opening Chrome Dev Tools
Anatomy of an Error Message
In the below example, in the BLACK in the Error Message is telling us we have a Template Error. The location of the error is in BLUE app.component.html
Common Angular Errors
Template Error
In the above images there is a template error. This just means there is an error in our html. Usually errors in the html are simple syntax errors, a typo or a missed closing tag on an element.
Undefined
The most common cause of a value or variable being undefined when you are trying to use it is you are referring to the variable without using the keyword “THIS”. When working with our angular components remember it is a class and in order to reference properties on the class we need to use this.propertyname. Think of the keyword “this” as self. Refer to this property on itself.
Pathing Errors
Cannot find module '../app.component'. Another common error is when you are importing components or anything in angular and the file path to that module or component is incorrect or needs to be installed. Remember the path to that file or module is relative the the the file you are importing it into.
Tips for pathing:
./ is in the current directory or folder
../ is up one directory or folder
../../ would be up two directories or folders etc.
Last updated
