Angular 7 Routing in Google Cloud App Engine not working

Question

I've published an angular 7 Application to Google Cloud App Engine.

The index page is loading, but the subdirectorys give me

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

This is my app.yaml:

runtime: nodejs10


env_variables:
environment: "--prod"

handlers:

  - url: /
    static_files: dist/XXX/index.html
    upload: dist/XXX/index.html
  - url: /
    static_dir: dist/XXX/
  - url: /.*
    secure: always
    script: auto

Edit: I finally figured out, how the routing in app.yaml works for Angular Applications. Here is my working app.yaml:

runtime: nodejs10

env_variables:
  environment: "--prod"

handlers:

- url: /
  secure: always
  static_files: dist/index.html
  upload: dist/.*
- url: /(.*\.js)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*\.js
- url: /(.*\.css)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  mime_type: text/css
  upload: dist/.*\.css
- url: /.*
  secure: always
  static_files: dist/index.html
  upload: dist/.*

Could've posted the solution as an answer, but it seems to work fine. — Doodles
– Doodles, Commented Sep 20, 2019 at 15:52

V.Tran · Accepted Answer · 2020-06-10 23:39:38Z

4

I think your routing rules in handlers work fine if your resource files are only js and css. If you have image files, audio files, etc, you must use a more generic routing rule with regex:

handlers:
  - url: /
    secure: always
    static_files: www/index.html
    upload: www/index.html

  #  Routing rules for resources, css, js, images etc. Any file with format filename.ext
  - url: /(.*\.(.+))$
    secure: always
    static_files: www/\1
    upload: www/(.*\.(.+))$

  #  Routing rule for Angular Routing
  - url: /(.*)
    secure: always
    static_files: www/index.html
    upload: www/index.html

The idea is the same, but syntactically, a wild card match for any files with format filename.* will handle all the resource files.

answered Jun 10, 2020 at 23:39

V.Tran

4871 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blair Holmes Over a year ago

this is a better approach than the self-answer in the question OP.

Collectives™ on Stack Overflow

Angular 7 Routing in Google Cloud App Engine not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related