The requested URL was not found on this server - Angular 2 Routing with Google Cloud

Question

The issue that I am currently experiencing is when I attempt to put in a specific route for example: "www.example.com/projects". This then produces:

Error: Not Found

The requested URL /projects was not found on this server.

Note: This does not happen when navigating to that route via UI, it only happens when refreshing the page or typing in the specific url.

One thing to mention is the I am using the google cloud platform and I set up the application first using angular cli.

I have seen multiple things stating that I have to serve the index.html for each route however I cannot find any documentation as to how to do that or even if that is the correct way to go about it.

I am not sure what all you would need to help me figure this out so I will update with what you need to assist.

I got the Hash Location Strategy working, but I am trying to get the Path Location Strategy working.

Thank you for all help!

Answer 1

In your app.yaml file, update your handler's regular expression to look like this:

- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
  static_files: dist/\1
  upload: dist/(.*)(|\.map)

- url: /(.*)
  static_files: dist/index.html
  upload: dist/index.html

The dist file is the static output from cli. Add any file extensions in the first handler if your app uses more.

Hope it works