App Engine on page refresh gives 404 for my angular2 project?

Question

The question is very similar to How do I make Angular 2 routing work with App Engine on page refresh? but I do not have enough points to comment and it says not to put questions in answers.

Anyway same problem except it's a static hosted site on appspot with angular cli dist folder being used:

Project
|
+--dist
   |
   +--index.html
   +--inline.js
   +--inline.map
   +--main.bundle.js
   +--main.map
   +--styles.bundle.js
   +--styles.map

+--app.yaml
+--index.yaml

I tried changing my app.yaml to something similar to Dan's answer linked above but can't work it out? Here is the app.yaml file:

application: 
version: 
runtime: python27
threadsafe: true
api_version: 1

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

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

- url: /
  static_files: dist/index.html
  upload: dist/index.html

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

Thanks

Answer 1

try this handlers:

- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
 static_files: dist/\1
 upload: dist/(.*)(|\.map)

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

add file extensions in the first handler if your app uses more.

works for my app...