Angular Application Rendering Backend Data on Page Refresh While Using Apache Server

I'm trying to deploy a demo Angular Flask Application with Apache. My project directory is /var/www/backend/basicapp/. This directory contains:

app.py

from flask import Flask, jsonify, render_template
from flask_cors import CORS, cross_origin

app = Flask(__name__)


CORS(app)

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
   return app.send_static_file('index.html')

@app.route('/facts')
def facts():
   return jsonify("Honey never spoils. Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old!")

@app.route('/jokes')
def jokes():
   return jsonify("Why don't scientists trust atoms? Because they make up everything!")

if __name__=='__main__':
    app.run()

app.wsgi

import sys
import logging
sys.path.insert(0, '/var/www/basicapp/backend')

from app import app as application

Further, this directory also contains a **static **folder where I have placed all the build files from Angular. This static folder also contains the index.html file which you can see in the base route.

Here is my Virtual Host configuration in the httpd.conf file for Apache:

<VirtualHost *:80>
  ServerName 192.170.160.71

  WSGIDaemonProcess basicapp user=apache group=apache threads=5
  WSGIScriptAlias /basicapp /var/www/basicapp/backend/app.wsgi

  <Directory /var/www/basicapp/backend>
    WSGIProcessGroup basicapp
    WSGIApplicationGroup %{GLOBAL}
    Require all granted
  </Directory>

  ErrorLog /var/www/basicapp/backend/logs/error.log
  CustomLog /var/www/basicapp/backend/logs/access.log combined

</VirtualHost>

Now, when I start the apache server and go to 192.170.160.71/basicapp/ , I can see my home page on the UI. Similarly, when I go to 192.170.160.71/basicapp/facts/ and 192.170.160.71/basicapp/jokes/ I can see the respective pages being rendered on the UI. However, when I go to both these routes(192.170.160.71/basicapp/facts/ and 192.170.160.71/basicapp/jokes/) and refresh the page, instead of showing the frontend UI, I see the backend data as JSON being shown on the screen. Basically, instead of showing the frontend html and CSS that I have written in Angular, it is showing the backend json message like how it is shown in the app.py file for /facts route or for the /jokes route. This particular behavior occurs only on refreshing the page and I want to avoid that. Where could I be going wrong?

It should show this: correct behavior

But on refreshing the page, it shows this instead of the UI: wrong behavior

Please note that the backend data suddenly gets shown only on refreshing the page or going to the route directly. I have a button on the home page to go to facts route and on clicking the button, the frontend UI gets shown correctly.

Initially, I tried just render_template(index.html) and that didn't work. Then I went to the Flask documentation and came across Single Page Application(SPA) and I tried adding that in the code as you can see. But that too didn't work.

Alternatively, you can use hash based routing within your Angular application. That too should solve the problem.