![]() ![]() This service acts as a plugin to our editor to allow our editor to understand our component templates better. The Angular team is working on a project called the Angular Language Service. These errors are great for debugging runtime errors but what can we do to improve our development experience in our editors? Visual Studio Code and the Angular Language Service The first line tells us which component had the error and then the method that was attempted to be executed. AboutComponent class AboutComponent - inline template:4:0 caused by: is not a function Angular spits out the full stack trace but indeed just the first line is what we care about.Įrror in. We have quite a bit in our error log but if we break it down its reasonably useful. Next, let's make a typo in our template and our click event call sayHelloTypo(). Not super helpful but in the following example we will see how we can improve this behavior. If the property doesn't exist, Angular won't show anything on the screen and doesn't give an error. We can see we have a typo in our message property, but if we start our app there are no errors! Angular templates are somewhat tolerant of referencing properties that don't exist in our component. So in our AboutComponent we have a message property and sayHello() method that we will reference in our template. What happens if we get a runtime error in our application? What do our Angular app errors look like? Well, let's create an error in our AboutComponent. This allows us to step through and debug our TypeScript code in the browser. ![]() So if we use a debugger statement to pause on our code, instead of Chrome showing the compiled ES5 JavaScript it will show us the TypeScript.Ĭhrome isn't using TypeScript but matching line for the line where the compiled JavaScript came from in our TypeScript code. Source maps "map" our generated JavaScript to our TypeScript code. It's not terrible looking we can understand what it's doing, but we can get a better debugging experience with source maps. We see that TypeScript can help catch some bugs at development time but what if we need to debug and step through code in the browser? Well with the Angular CLI we get extra generated files called source maps to help us out.Īs we can see below, this is what our simple about component looks like after the TypeScript has been compiled down to plain ES5 JavaScript. Our editors can give us some better information about what object we are using. This allows us to make sure like the example above that we have the correct object. Interfaces are like contracts for what your objects and data structures should look like. The example we have a simple add function, and with TypeScript's type annotations, silly errors like accidentally passing a string when it should be a number.Īnother great feature of TypeScript is the ability to create interfaces. What does that do for us? Well, it prevents us from accidentally passing the wrong types around. TypeScript is essentially the latest JavaScript + optional static types. With TypeScript, we get static type checking and features like interfaces. Modern Angular apps are written in TypeScript, and we get a lot of benefit with it. One of the great features of Angular is the use of TypeScript as it's primary language. ![]() If you call enableProdMode() in your app, Angular will disable the debugging hooks Augury needs at development time to give us the useful information about our app. ![]() Note to use Augury you must make sure you Angular app is in development mode. There is a router inspector as well to see what active routes are available in our app. This helps us visualize the dependencies in our project. We can inspect each component and see its properties and events associated with it.Īnother helpful feature of Augury is the ability to see the injector graph for the dependency injection system. We can view things like the component tree and how our app is broken up. Augury combines some useful tools that allow us to understand our Angular apps better. We will cover some of the following types of errors and debugging tips:įirst, we will cover a helpful Chrome add a tool called Augury. For this post, we will be using an Angular CLI project and do some debugging with the NG Pokedex demo app. In this post, we will cover some handy tips and tricks for debugging Angular apps. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |