Angular 16 / Flask Browser Refresh - How to Redirect to 'root'

Question

I am new to Angular and have been assigned the development of a SPA UI frontend communicating with a Flask server and everything was going fine until I hit an issue of when the user hits the refresh button.

What we want to do is redirect to the application root which in this case is index.html in the templates directory. One approach I found was to use the Flask errorhandler decorator to do the redirect but this won't work because there isn't anything returned back to the Flask server when I hit the 'Refresh' button.

When I launch the application I can see in my VSCode terminal window the Flask server starting the application container and that the call to render_template is loading all of the Angular assets; however, when I hit the browser refresh button all I see is a 404 error for the page that I was on and there is no call back to the Flask server.

So my question is this if there isn't a call back to the Flask server how can I perform the redirect to the application root. Do I put some sort of javascript handler in the index template that detects the 404 condition and handles reloading itself?

TIA, Bill Youngman

Answer 1

You can use this code to detect if you navigate to a route, or was browser refreshing the page.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnDestroy {
  name = 'Angular 6';
  subscription: Subscription;
  browserRefresh = false;
  
  constructor(private router: Router) {
    this.subscription = router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          browserRefresh = !router.navigated;
        }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Only thing is that the "browserRefreshed" will be true on first time loading the page. But you can use "sessionStorage", too. sessionStorage (Browser) will be deleted if the tab is closed, or a new tab is created (one session per tab). But if the open tab will be refreshed, the session will not gone. So you can check: First load, or refresh.