How do I make Angular 2 routing work with App Engine on page refresh?

Question

I am trying to make an Angular 2 app running on App Engine Standard Environment. It works with the following app.yaml configuration when navigating within the app:

handlers:
- url: /api/.*
  script: _go_app

- url: (.*)/
  static_files: static\1/index.html
  upload: static

- url: (.*)
  static_files: static\1
  upload: static

I can click on a link from / to /clients or /clients/234234 and it works fine.

However if I refresh the browser in a non base path e.g. http://myapp.appspot.com/clients/234234 then I get a 404 error. I guess I need to serve my index.html from all paths which is what I thought (.*)/ and (.*) would do.

How can I set up my handlers/app so I can use HTML5 routing and not let this happen?

Crist

Answer 1

I have a bunch of static files that need to be served so I added their mappings first. I also (most importantly) changed the way index.html was served:

handlers:
- url: /api/.*
  script: _go_app

- url: /(.*\.svg)
  static_files: static/\1
  upload: static/(.*\.svg)

- url: /(.*\.js)
  static_files: static/\1
  upload: static/(.*\.js)

- url: /(.*\.map)
  mime_type: application/octet-stream
  static_files: static/\1
  upload: static/(.*\.map)

- url: (.*)/
  static_files: static/index.html
  upload: static

- url: (.*)
  static_files: static/index.html
  upload: static

Crist