Resolver Angular 6

Question

I am creating a resolver for a route of my Angular 6 application.

Currently, I make a call to an API and return the data to a component so it can render the data in the component's template.

foo.resolver.ts

@Injectable()
export class FooResolver implements Resolve<any> {

  constructor(private fooService: FooService) {}

  resolve(route: ActivatedRouteSnapshot) {   
    return this.fooService.getById(route.paramMap.get('id'));
  }
}

foo.component.ts

export class FooComponent implements OnInit {

  fooObj: any = {};

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {    
    this.fooObj = this.route.snapshot.data.fooObject;    
  }
}

However, I need to change this current implementation to make a sub call to another API once getById has completed and returned a custom object to my foo.component.ts class. I have tried to edit the resolve function to reflect this requirement.

resolve(route: ActivatedRouteSnapshot) {   

    return this.FooService.getById(route.paramMap.get('id')).pipe(map(result => {

        this.fooService.getType().subscribe(results => {

            result.type = this.getObject(results, result.typeId);

        });

        return result;
    }));

private getObject(collection: any, id: number): any {
    return collection.find(e => e.id == id);
}

However, I am getting errors in the console. Regarding cannot Cannot read property 'name' of undefined. I don't think I am returing a finished Observable from the second version of the resolve function.

JB Nizet · Accepted Answer · 2018-08-15 21:35:03Z

2

The code should be

return this.FooService.getById(route.paramMap.get('id')).pipe(
  switchMap(result => 
    this.fooService.getType().pipe(
      map(results => {
        result.type = this.getObject(results, result.typeId);
        return result;
      })
    )
  )
);

Otherwise, the router gives the result to the component as soon as the first observable has emitted, without waiting for the second one.

answered Aug 15, 2018 at 21:35

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

Resolver Angular 6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related