The requested URL was not found on this server - A

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

add useHash:true in the router module it should works for angular 5 and java like this

@NgModule({
  imports: [
      RouterModule.forRoot(routes,{useHash:true})
],   

Answer 2

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

Answer 3

1- Your server side application should only render the base route "/" So that your Single page application can handle the routing to /projects.

2- You may also overcome this issue by adding hash # prefix to your client side routing like "www.example.com/#/projects"

In AngularJs you would do this by adding below code to your config function

$locationProvider
  .html5Mode(false);

Answer 4

I have made use of HashLocationStrategy available in Angular for this. I am unable to use PathLocationStrategy in my angular application when deploying it on Google cloud instance. If I use PathLocationStrategy, then I get the error:

Error: Not Found

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

For achieving HashLocationStrategy I simply used two lines of code in my app.module.ts

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})

export class AppModule

After all this I have realized it is better to use default path strategy that is available with angular, i.e., PathLocationStrategy. As told by Nicholas in the above answer, I am unable to find app.yaml file in my project structure which I created using angular-cli v1.4

It would be great if someone could guide me in a right direction here.

Answer 5

In case you're using PathLocationStrategy (html5 history) you need to have a handler to catch those dynamic routes

runtime: python37

handlers:
# index files
- url: /([^.]+)/?$  # urls with no dot in them
  static_files: dist/index.html
  upload: dist/index.html

# site root
- url: /
  static_files: dist/index.html
  upload: dist/index.html

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

https://cloud.google.com/appengine/docs/standard/python/config/appref#handlers_element