I want to either show/hide a route based on an API call (Promise returned). If I add a conditional based on the promise value as below, the route is correctly shown/hidden correctly when I visit the URL through navigation.

However, when I hit refresh on the URL, I get a 404 error. I am completely new to Angular, JS and promises so I can't understand what exactly is going on here, or how this is resolved.

let toggle: boolean = await fetch("/pageToggle")
        .then(response => response.json())
        .then(response => parseInt(response) === 1)
        .catch(() => false);

    if (toggle) {
             $stateProvider.state('maintenance.correspondence', {
                url: '/correspondence',
                data: {
                    title: 'Correspondence',
                    header: {
                        heading: 'Correspondence',
                        subheading: 'Correspondence'
                    }
                },

                template: '<correspondence></correspondence>',
                controller: ($scope: IScope) => {
                },
                onExit: (BreadCrumbs: BreadCrumbs) => {
                    BreadCrumbs.reset();
                },
                onEnter: (BreadCrumbs: BreadCrumbs, $stateParams: IStateParamsService) => {
                    BreadCrumbs.add("Correspondence", "Correspondence", null, "maintenance.correspondence");
                }
            }
        );
    }

Another point to clarify is that I only inherited this code from another developer, and all I am trying to do is fix the issue with the redirection.

The URLs look like using HTML5 mode. The URL's are like https://localhost:3000/#/maintenance/correspondence/

Edit 4/11/2021:

I've made some progress with this. What I've observed is that the 404 only happens when I do a conditional (based on promise result) around the state. Regardless of the result of the promise boolean, Angular is not able to resolve the route.

If I remove the conditional, I don't get the 404, but I do need a way to conditionally not show the route based as needed.

I have been looking at the resolve{} method to see if I can do the API call there, but I am not sure how or where to add the conditional for the state based on the promise. So I think this is now essentially working around AngularJS state providers to do what I need, if I understand this right.

Can someone please help me implement this?

Edit - 5/11/2021 I've been trying a few things, but still stuck with this. Can someone please help?