Handling angular resolver errors

In this video we will discuss handling angular resolver service errors.

Text version of the video

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

A resolver service is usually used to pre-fetch data for a route, before activating that route. When there is a resolver service, between a component and an angular service and if either the angular service or the resolver service throws an error, that target route will not be activated at all and you will stay on the current route.

For the rest of the text article please refer to our blog using the link below

[kjellberstad]

This is a super genious solution. Maybe I think so because I struggled with this challenge for several hours without finding a working solution. Thank you.

[gregorslana]

I would just like to say, that I got a job 2 days ago, partly also because of your tutorials. I would like to thank you, you are literaly saving lives. One day if time will permit, I would like to meet you in person. Thank you again, keep doing what you are doing!

[nakuldani]

Excellent job sir... I struggled a lot to find a solution for this problem. But you gave an excellent solution...

[moncefkho]

Nice, and your voice is so calm and clear that makes following easy

[sfriend-oyzw]

Hi Venkat Sir, I'm looking job in Angular.I'm learning Angular from your video tutorials.Could you please recommend any video tutorials that I need to watch and learn to get Angular Developer Job.Thanks very much for your help.I really admire your style of teaching.Please keep the good work.

[PANKAJKUMAR-jven]

Venkat Garu ..I have a request check if its possible .can u please do some video o cloud computig

[dsk_]

thank you for this video! It helped me a lot...

[yele]

Isnt the above code should be placed in the canactivate service? From previous videos, i understand that the resolver guard used to handle delay of displaying partial data, while can activate guard is used for blocking un found/un existed resources etc.. Thanks alot!

[talrofe]

I've just finished the javascript series then entered your latest video thinking your dad took your place in tutorials

[alxx]

Hi!! When you do a Resolver, you are returning an Observable.When this observable is executed, if any error you return another observable .Now my question is, who is in charge of subscribing to both Observables? Because in the component you already are receiving the data, no susbscritions at all. Thanks in advance!

[MartinHAndersen]

Hey thanks for the video. I don't think your error handling is working, why? you are loosing the http response message. If you have a web api controller and you return a badrequest because of model validation errors, Then how do you surface them? we need the user to be aware of the validation errors. It could also be a duplicate key insert or some other error.

[sairk]

Venkat Garu ..I have a request check if its possible ..can u please do some vids on Security related and writing unit test cases using Jasmine..Thanks in advance.. As usual.. Keep Always Inspiring us..

[ymtan]

Hi Venkat,

I am having difficulties to understand the 2 lines of code in the pipe method() in the resolver service as shown below. Could you kindly explain what these 2 lines of code are doing and why do we need to use the map() operator and catchError() operator ???

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): {
return
.pipe(
map((employeeList) => new ResolvedEmployeeList(employeeList)),
catchError((err: any) => Observable.of(new ResolvedEmployeeList(null, err)))
);
}

[pradeepchintu]

Hi Sir, I am getting the below error in command prompt :

ERROR in src/app/employees/employee-list-resolver.service.ts(37, 9): error TS2322: Type 'Observable<{} | ResolvedEmployeeList>' is not assignable to type
Type '{} | ResolvedEmployeeList' is not assignable to type 'ResolvedEmployeeList'.
Type '{}' is missing the following properties from type 'ResolvedEmployeeList': employeeList, error


And the below error in console:




Could you please help me in this

[josephregallis]

I am getting this error: ERROR in src/app/employees/employee-list-resolver.service.ts(17, 9): error TS2322: Type 'Observable<{} | ResolvedEmployeeList>' is not assignable to type
Type '{} | ResolvedEmployeeList' is not assignable to type 'ResolvedEmployeeList'.
Type '{}' is not assignable to type 'ResolvedEmployeeList'.
Property 'employeeList' is missing in type '{}'.
src/app/employees/employee-list-resolver.service.ts(20, 49): error TS2339: Property 'of' does not exist on type 'typeof Observable'.

[jonathansansens]

Problem fixe for Angular 6:

Error: Property 'of' does not exist on type 'typeof Observable'
Solution:
1) Add 'of' to the Observable import statement like this: import { Observable, of } from 'rxjs';
2) In catchError part, use 'of' instead of 'Observable.of'

EDIT: Check this video for more information:

[digitaljuhi]

Hello sir, i have got a error nd i have solved by many ways but can't suceed
erroe is:


kindly help me.

[nys]

2021:
import { Observable, of } from 'rxjs';

catchError((err: any) => of(new ResolvedEmployeeList(null!, err)))