Deployed angular 8 app gets an error on initial route urls

Question

When I deploy an angular 8 app to a Google Cloud Python App Engine environment, it works great. EXCEPT

If my App Engine domain is say https://mysuper-app.appspot.com, that is fine, but if I initially route to any routes within the app, say:

https://mysuper-app.appspot.com/viewfancything/237

I get an error result:

Error: Not Found The requested URL /login was not found on this server.

It's probably a switch or something either on the build or more probably the app.yaml for the App Engine, but any idea how I can make this work correctly?

Answer 1

Routing is performed virtually based on Angulars Router and not based on actual files. Therefore, your configuration can't resolve the routes like /route. So, you have to redirect all requests to your index.html in order to handle these.

assuming that you already build your angular project into a dist/project_name folder,

write an app.yaml file on dist/ and fill it with these:

runtime: python37
handlers:
    - url: /(.*\.(js|css|svg|png)(|\.map))$
      static_files: [project_name]/\1
      upload: [project_name]/(.*)(|\.map)
    - url: /.*
      static_files: [project_name]/index.html
      upload: [project_name]/.*

next, deploy it with gcloud app deploy command from dist/ directory