Angular 6+ resolver doesn't load video url

Question

I am trying to load a video url after the data be loaded from the server. I am using a resolver but it doesn't work because the video is loaded before the data some times. What I am doing wrong?

component.ts

this.valuePairService.getName('myVideoUrl').then(
  (responseUrl: any) => {
    this.videoUrl =
      responseUrl.value === undefined && this.hasVideo
      ? '//player.vimeo.com/video/09452678?dnt=1' 
        : responseUrl.value;
  }
);

resolver

@Injectable({ providedIn: 'root' })
export class ValuePairServiceResolver implements Resolve<string> {
    constructor(private nameValuePairService: valuePairService) { }

    resolve(route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<any> | Promise<any> | any {
        return this.valuePairService.getName('myVideoUrl');
    }
}

routing module

  {
    path: 'videos',
    resolve: { ValuePairServiceResolver },
    component: VideosComponent
  },

That's not how you should use it in the component. Check out the docs: angular.io/api/router/Resolve — Maciej Kasprzak
– Maciej Kasprzak, Commented Aug 17, 2021 at 16:45
Thank you @MaciejKasprzak I have taken a look to Angular documentation but that example doesn't work in my case. — beanic
– beanic, Commented Aug 17, 2021 at 16:46

Maciej Kasprzak · Accepted Answer · 2021-08-17 16:50:32Z

0

Your syntax in the routing module is incorrect. You need to specify the property name which will contain the resolved value:

resolve: { videoUrl: ValuePairServiceResolver }

Also, you're not using it correctly in the component. You should inject ActivatedRoute to the constructor and then you'll be able to access the resolved data:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.data.subscribe(({ videoUrl }) => {
    // you can access videoUrl here
  });
}

answered Aug 17, 2021 at 16:50

Maciej Kasprzak

9596 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Angular 6+ resolver doesn't load video url

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related