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.
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!
Hello Gregor Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful. Wow....Congratulations. Very happy for you. Thank you very much for taking time to share the good news. It's a great honour. Good luck and all the very best with your new role. Best Venkat
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.
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!
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..
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): Observable { return this._employeeService.getEmployees() .pipe( map((employeeList) => new ResolvedEmployeeList(employeeList)), catchError((err: any) => Observable.of(new ResolvedEmployeeList(null, err))) ); }
map() operator is used to transform one type to another type and that's exactly the purpose we are using the map() operator for. getEmployees() method of EmployeeService returns an Observable, but we want the resolve method to return an Observable, so the map operator is transforming Observable to Observable by copying the Employee[] array into employeeList property of ResolvedEmployeeList. As the name implies, catchError operator is used catch any errors while processing the request. We do not want to throw that actual error. If we do, the target route to which the resolver is tied (in our case LIST route), will not be activated. So we are catching the error, and copying the message property into the error property of ResolvedEmployeeList type and returning it to the caller. Hope this clarifies. Please let me know if there are any other questions.
The employeeList parameter on the left hand side of the => is the Employee[] array. So the map operator is going to copy the Employee[] array into employeeList property of ResolvedEmployeeList on the right hand side of the =>, is it correct ?
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: th-cam.com/video/Cuyf1k4bIzc/w-d-xo.html
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!
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' is not assignable to type 'Observable'. 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: Refused to load the image 'localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. Could you please help me in this
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.
I am getting this error: ERROR in src/app/employees/employee-list-resolver.service.ts(17,9): error TS2322: Type 'Observable' is not assignable to type 'Observable'. 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'.
Hello sir, i have got a error nd i have solved by many ways but can't suceed erroe is: Refused to load the image 'localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. kindly help me.
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.
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!
Hello Gregor
Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful.
Wow....Congratulations. Very happy for you. Thank you very much for taking time to share the good news. It's a great honour.
Good luck and all the very best with your new role.
Best
Venkat
Excellent job sir... I struggled a lot to find a solution for this problem. But you gave an excellent solution...
Nice, and your voice is so calm and clear that makes following easy
Venkat Garu ..I have a request check if its possible .can u please do some video o cloud computig also.......
Thank you for this video. It helped
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.
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!
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..
Sure Madan. We will definitely cover security, unit testing and end to end testing related concepts in our upcoming videos.
Thanks a lot venkat..we will look forward..
thank you for this video! It helped me a lot...
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): Observable {
return this._employeeService.getEmployees()
.pipe(
map((employeeList) => new ResolvedEmployeeList(employeeList)),
catchError((err: any) => Observable.of(new ResolvedEmployeeList(null, err)))
);
}
map() operator is used to transform one type to another type and that's exactly the purpose we are using the map() operator for.
getEmployees() method of EmployeeService returns an Observable, but we want the resolve method to return an Observable, so the map operator is transforming Observable to Observable by copying the Employee[] array into employeeList property of ResolvedEmployeeList.
As the name implies, catchError operator is used catch any errors while processing the request. We do not want to throw that actual error. If we do, the target route to which the resolver is tied (in our case LIST route), will not be activated. So we are catching the error, and copying the message property into the error property of ResolvedEmployeeList type and returning it to the caller.
Hope this clarifies. Please let me know if there are any other questions.
The employeeList parameter on the left hand side of the => is the Employee[] array. So the map operator is going to copy the Employee[] array into employeeList property of ResolvedEmployeeList on the right hand side of the =>, is it correct ?
That is correct.
I've just finished the javascript series then entered your latest video thinking your dad took your place in tutorials
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:
th-cam.com/video/Cuyf1k4bIzc/w-d-xo.html
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!
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' is not assignable to type 'Observable'.
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:
Refused to load the image 'localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Could you please help me in this
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.
2021:
import { Observable, of } from 'rxjs';
.....
catchError((err: any) => of(new ResolvedEmployeeList(null!, err)))
I am getting this error: ERROR in src/app/employees/employee-list-resolver.service.ts(17,9): error TS2322: Type 'Observable' is not assignable to type 'Observable'.
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'.
I had to add "import 'rxjs/add/observable/of';" to get rid of the 'of' error.
For Angular 6, here is my complete code:
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
import { Injectable } from '@angular/core';
import { EmployeeService } from './employee.service';
import { ResolvedEmployeeList } from './resolved-employeelist.model';
import { catchError } from 'rxjs/operators';
import { map } from 'rxjs/operators/map';
@Injectable()
export class EmployeeListResolverService implements Resolve {
constructor(private _employeeService: EmployeeService) {
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
return this._employeeService.getEmployees().pipe(
map((employeeList) => new ResolvedEmployeeList(employeeList)),
catchError((err: any) => Observable.of(new ResolvedEmployeeList(null, err)))
);
}
}
Hello sir, i have got a error nd i have solved by many ways but can't suceed
erroe is:
Refused to load the image 'localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
kindly help me.