Angular app throwing Gateway Timeout error

Question

I have an Angular app that needs to have a resolver as the data doesn't load on OnInit. The deployment of the app is being done through Azure App Service in Azure DevOps. The problem I'm having is the app loads fine without the Resolver, but as soon as I put the import of the resolver, it throws the Gateway Timeout.

route.module.ts

import { RateResolver } from 'src/client/services/rate.resolver.ts'
...
path: '',
resolve: { rates: RateResolver },
...

rate.resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { IRate } from 'src/client/models/rates/irate';
import { RateService } from './rate.service';

@Injectable({
  providedIn: 'root'
})
export class RateResolver implements Resolve<IRate[]> {
  constructor(private rateService: RateService){}
  
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): IRate[] | Observable<IRate[]> | Promise<IRate[]> {
    return this.rateService.getAllRates()
  }
}