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

Niple

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...

Sunderland

Cheers for that it works. Is there some documentation that you showed you how to create this handler for angular2 apps? I have been searching everywhere – Niple

For a single page app you want to redirect any url to the index.html, except for assets that usually have specific file extensions. When you understand this and how to write regex, it's straightforward. – Deluna

Thanks, this worked for me. I had to add a few other font extensions like ttf – Washtub

Wow, what a headache. They you for the medicine!!! – Nolita