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?

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... — Sasxa
– Sasxa, Commented Mar 27, 2017 at 7:54
Facing the same issue but seems no fix around template parsing error. @harryjohn did you get any fix around this ?? — Kanchan
– Kanchan, Commented Jul 16, 2017 at 8:59

Sasxa · Accepted Answer · 2017-03-27 07:57:56Z

5

You can use custom ErrorHandler:

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

answered Mar 27, 2017 at 7:57

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pardeep Jain Over a year ago

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

Sasxa Over a year ago

@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...

Pardeep Jain Over a year ago

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 ?

Sasxa Over a year ago

@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 (:

harryjohn Over a year ago

@Sasxa 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?

|

Jeff Mitchell · Accepted Answer · 2021-05-29 03:28:57Z

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.

edited May 29, 2021 at 3:28

Jeff Mitchell

1,1671 gold badge8 silver badges16 bronze badges

answered May 27, 2021 at 16:58

Bhaskar Reddy

793 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related