How use route resolver correctly with lazy loading and across multiple modules

Question

Earlier when I didnt had separate module for profile I didn't have to place profileDetails resolver inside only the dashboard component parent route and in all my componets i am accessing profile details as follows

 activeRoute.parent.data.subscribe((data)=> {
  this.userDetail = data.profileDetails.data;
});

Now I need to put profile detail resolve in all the sub modules of dashboard module and every time I go inside the compolent the profile detail api in the network tab gets called 2 times instead of one. I think one is called from the dashboard routing module and other from the individual module like profile module in this case.

App routing module

    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule'

Dashboard Routing Module

const routes: Routes = [
  {
    path: '', component: DashboardComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: "always",
    resolve: {
      profileDetails: ProfileDetailsResolverService,
    },  
    children: [
     {
       path: '', 
       loadChildren: './dashboard-home/dashboard-home.module#DashboardHomeModule'
     },
     {
         path: 'my-profile',
         loadChildren: './my-profile/my-profile.module#MyProfileModule'
      }

Profile Routing Module (I have to place profile details resolve here and all the other components, is there a way to not put it here and access the resolve which is already placed in the dashboard routing module)

    const routes: Routes = [
  { 
    path: '', resolve: {
      profileDetails: ProfileDetailsResolverService,
    },
    children: [
      {
        path: '', component: MyProfileComponent,
        data: { title: 'Ddb | Profile' }
      }
    ]
  }
];

S.Voulgaris · Accepted Answer · 2019-07-22 14:29:51Z

1

You can use the resolver only in the parent component and create another service with the profile details that will be injected on every other component you want like this :

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

 @Injectable({ providedIn: 'root' })

 export class ProfileDetailsService {

 private subject = new Subject<Details>();

 sendDetails(currentDetails: Details) {
    this.subject.next(currentDetails);
 }


 getDetails(): Observable<Details> {
    return this.subject.asObservable();
 }
}

On the ProfileDetailsResolverService :

this.profileDetailsService.sendDetails(details);

And finally subscribe to it wherever you want to have these data :

this.profileDetailsService.getDetails().subscribe(currentDetails => {
this.details= currentDetails;
});

answered Jul 22, 2019 at 14:29

S.Voulgaris

3342 silver badges5 bronze badges

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

2 Comments

yetetatuh Over a year ago

Thanks, I am a bit confused as to where to call this api in that code to get the profile details getUserProfile() { return this.http.get(this.userProfileApi); in other where to make the http request to get the profile and make sure its not called every time }`

S.Voulgaris Over a year ago

You should make the api call inside your resolver in order to be sure that you will have the data you need before rendering your components

Collectives™ on Stack Overflow

How use route resolver correctly with lazy loading and across multiple modules

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related