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:         


        

Answer 1

Compiled and deployed Angular applications contain of a single index.html along with a couple of assets, such as JavaScript files. The index file contains all JavaScript files. Routing is performed virtually based on Angulars Router and not based on actual files. Therefore, your configuration can't resolve the routes like /route. Besides your assets, you have to redirect/rewrite all requests to your index.html in order to handle these by your Angular routing.

runtime: python27
api_version: 1
threadsafe: true

skip_files:
  - (?!^dist)

handlers:
  - url: /(.*\.(js|css|svg|png)(|\.map))$
  static_files: dist/\1
  upload: dist/(.*)(|\.map)
  - url: /.*
  static_files: dist/index.html
  upload: dist/.*

Please adapt the regular expression if you've got more files you're serving.

Answer 2

Update your flask server so that "/" and "/route" both return your angular index.html. This way angular will handle the routing to display the right content when it's returned by GAE/flask.

Answer 3

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>