Angular Resolver does not hit API when reloading the page?

Question

I've used resolver for one of my component. when navigate from component to route it works fine. but when I reload the page it does not hit API. it gives me the uncaught error.

This my list

when i click the button it goes to this route

but when I reload the page (above image URL) it gives me uncaught error. 401

Here is my code company.resolver.ts

@Injectable({
  providedIn: 'root',
})
export class CompanyResolver implements Resolve<any> {
  constructor(
    private companyService: CompanyService,
    private activatedRoute: ActivatedRoute
 ) {}

  resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<any> | any  {
    return this.companyService.fetchCompanyById(route.params['id'])
  }
}

company.services.ts

fetchCompanyById(id: number) {
    return this.http
      .get(environment.apiUrl + 'company/getCompanyById/' + id)
  }

company-edit.component.ts

model: any = {};
 ngOnInit(): void {
      this.activatedRoute.data.subscribe((data:any) => {
        var a = data;
         console.log(a.data)
         this.model = {...a.data}
      })
    }

can any one help me about this issue or give suggestion whats going wrong and what to do. i would be really grateful.

score 0 · Answer 1 · answered Jan 19 '23 at 14:03

0

Could you check if auth token is sent on that get call after refresh? It seems that endpoint requires authentication.

answered Jan 19 '23 at 14:03

Zsolt Balint

767
1
6

I have a token interceptor which authenticate token whenever I sent request.so token is not an issue. i tried something else like i wrap the resolver code inside setTimeOut. after that API hit properly this error doesn't occur but it creates another issue, which take time to load the data. within this time template is loaded. But this does not solve my actual business requirement – Mh Dip Jan 19 '23 at 14:22

score 0 · Answer 2 · answered Jan 20 '23 at 12:34

after 5 hours study I found the solution. actual I download a UI template when i stared the project. now i found that in app.routing.module, they set value initialNavigation to enableBlocking. I just comment that and it is working fine.

app.routing.module.ts

  @NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'top',
      anchorScrolling: 'enabled',
      //initialNavigation: 'enabledBlocking',
      
    }),
  ],
  exports: [RouterModule],
})

Angular Resolver does not hit API when reloading the page?

2 Answers2