Catching Angular template errors like a pro, or how I build Angular demos

I’m a fairly regular StackOverflow participant, though my activity level swings with my workload. I like answering questions tagged with Angular and always try to put together a runnable example to back up my suggestions.

For Angular demos, my go-to tools are plunker, stackblitz, and sometimes jsfiddle. They’re all solid, but when something goes wrong, I find myself wanting a more practical way to inspect the problem.

Most people posting questions on StackOverflow don’t isolate the issue or build a minimal reproduction — they just dump their whole codebase into the question. On top of that, the templates are often sloppy and full of syntax mistakes. To avoid endlessly chasing where an error comes from, I started building a tool that would help me zero in on the problem quickly.

Angular demo runner
Online angular editor for building demo.
ng-run.com

Here’s what I mean…

Catch Angular template errors like a pro or how I create Angular Demo — figure 1

Errors from the template parser

Template parser errors are easy to catch with stackblitz.

Catch Angular template errors like a pro or how I create Angular Demo — figure 2

It gives me some info, but what I really want is for the error to be visually flagged.

Catch Angular template errors like a pro or how I create Angular Demo — figure 3

ng-run example

Catch Angular template errors like a pro or how I create Angular Demo — figure 4
Catch Angular template errors like a pro or how I create Angular Demo — figure 5

And it runs inside ts files too.

Catch Angular template errors like a pro or how I create Angular Demo — figure 6

Runtime errors

Stackblitz catches every template parser error, but when I need to debug other runtime errors, I have to switch to DevTools Console. Even when the error shows up, it’s often unclear what it actually means or where it originated.

Let’s try a simple expression in a template:

{{ x.name }}

Catch Angular template errors like a pro or how I create Angular Demo — figure 7

It would be much nicer to view it this way:

Catch Angular template errors like a pro or how I create Angular Demo — figure 8

ng-run example

I regularly work with dynamic component creation and, like many others, sometimes overlook adding a component to the entryComponents array.

Catch Angular template errors like a pro or how I create Angular Demo — figure 9

Other times, an event handler might throw an error mid-execution.

Catch Angular template errors like a pro or how I create Angular Demo — figure 10

ng-run example

ExpressionChangedAfterItHasBeenCheckedError

Even though requests like these:

haven’t been implemented, I can still retrieve more useful details now.

(Update: starting with Angular 5.2.3, the binding name shows up in the error https://github.com/angular/angular/commit/2af19c96f215794260c22057f0f9b9a93cccdb00 — but this isn’t the case for interpolated values.)

Here’s a basic example:

Catch Angular template errors like a pro or how I create Angular Demo — figure 11

Let’s also walk through a routing-based example:

Catch Angular template errors like a pro or how I create Angular Demo — figure 12

One more example

What else is there?

A handful of other features make demo-building much quicker:

  • Built-in Angular language service (HTML syntax diagnostics and autocomplete)
  • Angular CLI Generator for Component, Service, Directive, Module and Pipe
  • Auto import
  • Go to definition
  • Prettier
  • Emmet in css and html (inline templates included)
  • Syntax highlighting, completion and formatting for inline Angular templates
  • Split layout into two sections
  • Predefined templates
  • A wide range of themes
  • Snippets (angc angd)

Catch Angular template errors like a pro or how I create Angular Demo — figure 13
Catch Angular template errors like a pro or how I create Angular Demo — figure 14

Available themes

Thanks for reading:)