Angular Debugging Guides

The best part of coding is when something works on the first try. The next best thing is knowing how to debug errors when things don’t work the first time. As we’ve shared on our roadmap, one of our team’s top priorities is improving the Angular debugging experience.

We’re excited to announce several new projects to improve debugging and help developers solve problems faster!

Standardized error codes

The most common Angular error messages now have standardized error codes, additional details and formatting. You can identify these codes in the following format:

You will notice that Angular error messages all start with NG, which help differentiate between Angular specific errors, TypeScript errors, and browser messaging. The next number indicates its type, all runtime errors beginning with 0 and compiler issues maintaining their existing number space. If you’re interested in the current groupings, I’d recommend digging into the source code to see the categories of runtime errors and compiler errors.

These changes landed in v11.1.0 and aim to help developers recognize Angular framework errors, make them more searchable, and will help the Angular team standardize and group them by similarity. Another new addition to these error messages is a link to angular.io/errors — we prioritized the most common errors and wrote angular.io guides for them.

Angular.io/errors Guides

Angular documentation has a new section! The ten most common errors now have guides which outline details and debugging tips.

When you run into one of these issues while coding, the error message contains a direct link to this section to help you debug by providing a description, ways to debug, and recommended solutions to common issues.

These guides also include our first ever embedded docs instructional videos: the Angular Debugging YouTube series, in partnership with Fireship.io!

Debugging videos on the Angular YouTube channel

In addition to linked angular.io/errors guides in our error messages, we also have debugging videos! Our new series helps visualize how to debug these common errors. You can check out the Angular YouTube channel to watch our Debugging Playlist now, or wait until you encounter an error to watch!

This workflow, from framework error formatting, to guides, to videos, aims to improve the debugging experience and help new developers learn Angular. We hope you enjoy these new resources and be sure to let us know what error guides you’d like to see added!