Angular 6 routes not found on Google App Engine

Question

I deployed an Angular 6 application on Google App Engine. The app.yaml config looks like that:

runtime: python27
api_version: 1
threadsafe: true

skip_files:
- (?!^dist)

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

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

Everything works fine and I can access everything till I reload the page on a route or directly access the website by a route (eg. myapp.com/route). Doing that I get a The requested URL /route was not found on this server error message.

Answer 1

The reason why 404 Not Found is showing on page refresh is that all Angular2 routes should be served via the index.html file.

You can fix this issue by adding a .htaccess file (in the same directory where the index.html resides) with the following contents.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>