Cannot GET /page in Angular

Question

I tried deploying an angular application on Google Cloud but only the home page gets deployed. When I click on any other button in the nav bar it gives an error saying Error: Not Found

The requested URL /pagename was not found on this server.. Here is the link to the url I deployed to using google cloud https://x691webapp.uc.r.appspot.com and here is my app.yaml file

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dist/X691Website/index.html
  upload: dist/X691Website/index.html
- url: /
  static_dir: dist/X691Website

skip_files:
  - e2e/
  - node_modules/
  - src/
  - coverage
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

If you have proper routing setup, use routerlinks in your menu. Also, make sure to setup a rewrite url on GCH to rewrite all unknow file requests to hour index.html — MikeOne, Nov 19 '21 at 18:02
When I run it locally it works (ng serve) but when deployed on GCP it doesn't work — R.Rasheed, Nov 19 '21 at 19:37

score 0 · Answer 1 · answered Nov 20 '21 at 02:48

I think one minor change can fix your issue. If you look at the google cloud doc here, https://cloud.google.com/appengine/docs/standard/python/config/appref#handlers_element. It explains that,

Patterns are evaluated in the order they appear in the app.yaml file, from top to bottom. The first mapping whose pattern matches the URL is the one used to handle the request.

If we look at your yaml configuration, both the urls defined in the handlers are same. So, all the requests match first url pattern in the handler and second url handler is never matched because of same pattern. Try to change the urls in the handlers as below

handlers:
  - url: /^$
    static_files: dist/X691Website/index.html
    upload: dist/X691Website/index.html
  - url: /*
    static_dir: dist/X691Website

I guess the problem might be due to the Routing strategy in your angular module. If you use hash routing strategy, you might fix your problem. This problem is addressed in one of stackoverflow questions, please take a look at it - https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser. — Raj Kumar N, Nov 22 '21 at 03:10

Cannot GET /page in Angular

1 Answers1