How to handle template errors (and other errors) in angular 2?

Question

When ever there is a template error in angular 2, the entire application fails to work.

Shouldn't only the component that had the template that caused the error, fail to work and the rest of the application be working fine?

How to handle errors so that the application won't stop being responsive when an error occurs?

Gryphon

You are suppose to fix them and not ship code with errors (: It's a good thing that app fails. You can, however, use custom ErrorHandler... – Reseda

Facing the same issue but seems no fix around template parsing error. @Gryphon did you get any fix around this ?? – Beef

Answer 1

You can use custom ErrorHandler:

class MyErrorHandler implements ErrorHandler {
  handleError(error) {
    // do something with the exception
  }
}
@NgModule({
  providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}

Reseda

Great answer, But when this class calls ? on load of app ? or on some particular component ?, should i called this in main module ? , please provide bit more explanation if you can. thanks – Foregather

@PardeepJain It's a root provider, so it should work for the whole app. I don't know what happens if you have more then one ErrorHandler with lazy loaded modules and their injector. I wrote just two of them: one for a real app that saves error to firebase; second to stop those annoying zone exceptions when serving with HMR and do styling work. But both are just like this example, with provider at AppModule level. I didn't explore it further... – Reseda

okay thank alot for info, one thing more i tried this but throw some error dont know whats the reason is, should i have to create seprate module for ErrorHandler ? or just import within appModule like you did in answer ? – Foregather

@PardeepJain No need for separate module, unless you need a module (: I put it in CoreModule in my app, but it shouldn't matter, as long as it's provided at root level (handled by root injector/provided in eagerly loaded module). Not sure if I'm clear, but as long as you don't do this, you're good (: – Reseda

@sasxa But template parse errors will still make the page hang right? Can I recover from such an error by using custom ErrorHandler ? What 's happening in an application I'm working on is that, when ever a template parse error occur, the buttons on the page stop responding. – Gryphon

@Gryphon I'm not sure what you're doing, but if button click calls a function if you handle errors there it shouldn't stop responding. If you are calculating something in the template, maybe you should move that into component class. Worst case, you can delete button from DOM and recreate new one (; – Reseda

But doesn't template parse error occur at build time? You shouldn't be getting that in your browser. Unless you are compiling at runtime? – Reseda

@Reseda Consider a pipe that can sometimes throw an error for wrong inputs that's passed to it. These errors can occur at runtime and won't be caught during development. My questions is related to this. Is there a way to handle such errors, so that everything, except the component that threw the error, will work as expected? – Gryphon

Answer 2

Errors that comes while parsing the angular template or while evaluating the expression cannot be handled by angular Errorrhandller. These kind of errors needs to be fixed.

You can avoid the following mistakes to prevent the template error occurring: Don't bind methods in directives like *ngIf , *ngFor. Don't write big expression in directives which likely would cause error. Keep a minimal amount of logic in templates.

Anyone can add if anything missing.

Buschi