Google Cloud - Angular - The requested URL / was not found on this server

Issue

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

Angular project deployed on google cloud called angular-weather: enter image description here

As you will see, it has the app.yaml file as follows:

runtime: nodejs20
service: weather-front

handlers:
  - url: /*
    static_files: dist/angular-weather/index.html
    upload: dist/angular-weather/index.html

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

After executing the ng build and gcloud app deploy command, I open the deployed app and it does not find the index or the logo (.ico).

Solution

Couple of things to keep in mind...

If your first handler is greedy and matches anything, then your second handler will never come into play.

If you wanted those exact handlers, you'd want to do the second handler first, so it would take anything that matches those specific patterns, and then the general handler would take (almost) anything that's left. However, for this type of Angular deployment, I'd suggest a cleaner/simpler structure.

Consider putting a handler in for the bare root, and then just pass all other references through as-is.

Try the following:

handlers:
- url: /
  static_files: dist/angular-weather/index.html
  upload: dist/angular-weather/index.html

- url: /(.+)
  static_files: dist/angular-weather/\1
  upload: dist/angular-weather/.*

So

https://my.domain.com/ --> index.html [1st handler]

https://my.domain.com/index.html --> index.html [2nd handler]

https://my.domain.com/foo/bar.png --> foo/bar.png [2nd handler]

Answered By - Mike