Angular Resolver returns undefined

Question

I am new to angular and I am trying to implement the resolve in my angular wherein my need is that the component should load only when the data is available. But the issue is that the resolve code executes before I could catch it in the component and the returned data in the component gives undefined value.

Resolve Code:

    export class RouteResolver implements Resolve<any> {
    
      ongoingClasses: any;
      sortedDataClasses: any;
      
      constructor(
        public commonService: CommonService,
        private router: Router,
      ) { }
    
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        return this.getOngoingClasses();
      }
    
      getOngoingClasses(): any {
        debugger;
        this.commonService.API_URL = `${environment.apiUrl}/admin/dashboardOngoingClasses?limit=10&offset=0&searchInput=`;
        this.commonService.getList().subscribe(
          response => {
            this.ongoingClasses = response?.data;
          }
        );
      }
    
    }

Component Code:

    ngOnInit(): void {
        debugger
        this.activateRoute.data.subscribe((results: { results: any }) => {
          console.log(results.results);
        });
      }

Route Code:

    const routes: Routes = [
        {
            path: '',
            component: HomeComponent,
            children: [
                {
                    path: 'dashboard',
                    component: DashboardComponent,
                    canActivate: [AuthGuard],
                    resolve: {
                        results: RouteResolver
                    }
                },
    
                { path: '', redirectTo: 'home', pathMatch: 'full' },
                { path: '**', redirectTo: 'home', pathMatch: 'full' },
            ],
        },
    ];

Please help me in resolving this.

Can you make a working sample on stackblitz.com?

Alireza Ahmadi
– Alireza Ahmadi

2021-07-25 06:58:47 +00:00
Commented Jul 25, 2021 at 6:58 — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 25, 2021 at 6:58
You should return something from getOngoingClasses...

Aviad P.
– Aviad P.

2021-07-25 07:42:27 +00:00
Commented Jul 25, 2021 at 7:42 — Aviad P.
– Aviad P., Commented Jul 25, 2021 at 7:42

Aviad P. · Accepted Answer · 2021-07-25 08:04:56Z

2

You are not returning anything from getOngoingClasses that's why your resolver returns undefined. Instead of subscribing to something, you should return an observable:

getOngoingClasses(): any {
  debugger;
  this.commonService.API_URL = `${environment.apiUrl}/admin/dashboardOngoingClasses?limit=10&offset=0&searchInput=`;
  return this.commonService.getList().pipe(map(response => response?.data));
}

edited Jul 25, 2021 at 8:04

answered Jul 25, 2021 at 7:44

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

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

Comments

Reza Rouzbahani · Accepted Answer · 2021-07-25 08:04:57Z

1

add return in end of map block . like this :

return this.commonService.getList().pipe(map(response => return response?.data));

answered Jul 25, 2021 at 8:04

Reza Rouzbahani

631 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular Resolver returns undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related