title: Angular: How to serve on Flask and route to different endpoints/paths?
body: <p>I am trying to make an Angular application served with Flask to load the Angular app login page. Using just the <code>https://domainname/</code> works fine, but I cannot route to <code>https://domainname/login</code>.</p>
  <h3>Steps to reproduce:</h3>
  <ul>
  <li>Clear browser cache</li>
  <li>Open new tab and navigate to <code>https://domainname/login</code></li>
  <li>Returns 404</li>
  </ul>
  <p>Initially I used another solution, but trying things along the way, I ended up with the approach suggested by Stack Overflow question <a href="https://stackoverflow.com/questions/53824239/python-flask-serving-angular-projects-index-html-file"><strong>Python (Flask) serving Angular project's index.html file</strong></a></p>
  <h3>Flask Routes</h3>
  <pre><code>@app.route('/&lt;path:path&gt;', methods=['GET'])
  def static_proxy(path):
    return send_from_directory('./dist/', path)
  
  
  @app.route('/')
  def root():
    return send_from_directory('./dist/', 'index.html')
  </code></pre>
  <p>The production build from the Angular app goes directly in the <code>dist</code> folder. The <code>https://domainname/</code> request hits the first route and actually I couldn't see the second route working. So when I type <code>https://domainname/login</code> it hits the first route and of course it returns <code>404</code> because there is no file with name login in the 'dist' folder. So the question is, how to route to paths like:</p>
  <ul>
  <li><code>https://domainname/login</code></li>
  <li><code>https://domainname/contacts</code></li>
  <li><code>https://domainname/contacts/map</code></li>
  </ul>
  <p>The other configuration that I have tried, and it has the same behavior, is using <code>Blueprint</code>. I don't understand why, still doesn't work with the <code>/login</code> path, because in this version should return the index.html file and it should work on the client side, correct? (here the angular app is build to static/dist)</p>
  <pre><code>main.py
  from app.api_default import api as default_blueprint
  app.register_blueprint(default_blueprint)
  </code></pre>
  <p>...</p>
  <pre><code>app/api_default/__init__.py
  STATIC_FOLDER = os.path.join(os.pardir, 'static/dist')
  api = Blueprint('default', __name__, static_folder=STATIC_FOLDER, static_url_path='')
  from . import routes
  </code></pre>
  <p>...</p>
  <pre><code>app/api_default/routes.py
  
  @api.route('/', defaults={'path': ''})
  @api.route('/&lt;path:path&gt;')
  def route_path(path):
    return api.send_static_file('index.html')
  
  
  @api.route('/')
  def home_paths():
    return api.send_static_file('index.html')
  </code></pre>