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

Post Editor

I consider myself an active StackOverflow user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers.

3 min read
post

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

I consider myself an active StackOverflow user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers.

post
post
3 min read

I consider myself an active StackOverflow user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers.

To create angular demo I usually use either plunker or stackblitz or even jsfiddle. I like all of them but when I run into some errors I want to have a little bit more usable tool to undestand what’s going on.

Many people who ask questions on stackoverflow don’t want to isolate the problem and prepare minimal reproduction so they usually post all code to their questions on SO. They also tend to be not accurate and make a lot of mistakes in template syntax. To not waste a lot of time investigating where the error comes from I tried to create a tool that will help me to quickly find what causes the problem.

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

Let me show what I mean…

Template parser errors
Link to this section

There are template parser errors that can be easy catched by stackblitz

It gives me some information but I want the error to be highlighted


ng-run example

It also works within ts files

Runtime errors
Link to this section

While stackblitz catches all template parser errors i have to open DevTools Console to catch all other runtime errors. And even i can see the error i doubt what it means and where it comes from.

Let’s start with simple expression in template:

{{ x.name }}

It would be better if we could see it like

ng-run example

I often deal with dynamic component creation and like many people can forget to add component to entryComponents array

Some error can happen during executing of event handler

ng-run example

ExpressionChangedAfterItHasBeenCheckedError
Link to this section

While such feature requests like

are unsupported yet i can get more details now.

(Update: since angular 5.2.3 we can see binding name https://github.com/angular/angular/commit/2af19c96f215794260c22057f0f9b9a93cccdb00 but not for interpolated values)

Here is a simple example:

Let’s also take a look at an example with routing:

One more example

What else?
Link to this section

There are also several features that help me to build demo quickly:

  • Integrated Angular language service (Syntax diagnostics and completions in html)
  • Angular CLI Generator for Component, Service, Directive, Module an Pipe
  • Auto import
  • Go to definition
  • Prettier
  • Emmet in css and html (including inline templates)
  • Syntax highlighting, completion and formatting for inline angular templates
  • Splitting layout into two sections
  • Predefined templates
  • A lot of themes
  • Snippets (angc angd)
Availavle themes


Thanks for watching:)

Share

About the author

author_image

Alexey is a GDE for Angular and Web Technologies and also active StackOverflow contributor.

author_image

About the author

Alexey Zuev

Alexey is a GDE for Angular and Web Technologies and also active StackOverflow contributor.

About the author

author_image

Alexey is a GDE for Angular and Web Technologies and also active StackOverflow contributor.

Looking for a JS job?
NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

JavaScriptpost
27 September 202130 min read
An in-depth perspective on webpack's bundling process

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with it, mostly due to its complexity.

JavaScriptpost
27 September 202130 min read
An in-depth perspective on webpack's bundling process

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with it, mostly due to its complexity.

Read more
JavaScriptpostAn in-depth perspective on webpack's bundling process

27 September 2021

30 min read

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with it, mostly due to its complexity.

Read more