We have an Angular 6 app built and deployed to Google Cloud App Engine, which is functioning correctly. However, any time the browser is refreshed with a route other than the root of the app, we are getting a 404.
Here is our app.yaml file:
runtime: nodejs8
handlers:
- url: /
static_files: dist/song/index.html
upload: dist/song/index.html
secure: always
- url: /(.*)
static_files: dist/song/\1
upload: dist/song/(.*)
secure: always
- url: /dashboard
static_files: dist/song/index.html
upload: dist/song/index.html
secure: always
The error is a 404 saying "Static file referenced by handler not found: song/dashboard/allshoppers"
So, it's looking for a static file in a directory structure, but this is a route within our Angular app.
I've had the same problem and tried the answer above with no luck. After a lot of trial and error I ended up with the app.yaml below. That one works for my setup using Google Cloud Build to deploy to Google App Engine directly.
As a bonus it also redirects HTTP requests to HTTPS, and skip files not usually needed.
I'm sure there might be more efficient ways to do this, but once I got it working I didn't dare change it any more.
app.yaml:
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /(.+\.js)
static_files: dist/project/\1
upload: dist/project/(.+\.js)
secure: always
redirect_http_response_code: 301
- url: /(.+\.css)
static_files: dist/project/\1
upload: dist/project/(.+\.css)
secure: always
redirect_http_response_code: 301
- url: /(.+\.png)
static_files: dist/project/\1
upload: dist/project/(.+\.png)
secure: always
redirect_http_response_code: 301
- url: /(.+\.jpg)
static_files: dist/project/\1
upload: dist/project/(.+\.jpg)
secure: always
redirect_http_response_code: 301
- url: /(.+\.gif)
static_files: dist/project/\1
upload: dist/project/(.+\.gif)
secure: always
redirect_http_response_code: 301
- url: /(.+\.svg)
static_files: dist/project/\1
upload: dist/project/(.+\.svg)
secure: always
redirect_http_response_code: 301
- url: /favicon.ico
static_files: dist/project/favicon.ico
upload: dist/project/favicon.ico
secure: always
redirect_http_response_code: 301
- url: /(.+\.json)
static_files: dist/project/\1
upload: dist/project/(.+\.json)
secure: always
redirect_http_response_code: 301
- url: /(.+)
static_files: dist/project/index.html
upload: dist/project/index.html
secure: always
redirect_http_response_code: 301
- url: /
static_files: dist/project/index.html
upload: dist/project/index.html
secure: always
redirect_http_response_code: 301
skip_files:
- e2e/
- node_modules/
- src/
- ^(.*/)?\..*$
- ^(.*/)?.*\.md$
- ^(.*/)?.*\.yaml$
- ^LICENSE
I tried the above and it works for me but the only thing is on every refresh it get redirected from the home page. Any workaround for that or am I missing something here.