GCP App Engine / Angular - Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

Question

I am trying to host an Angular app on Google Cloud Platform using the App Engine. The problem is that after I have succesfully deployed it, I am able to access it for about 2-3 minutes, hit refresh and not get HTTP error 404, but after those 2-3 minutes I am receiving the following errors in Chrome (colleagues receive the same error on their machines as well):

I have tried building my angular app using:

ng build --prod
ng build --prod --base-href sep6-app

Angular app folder structure:

- dist/
  - sep6-app/
  - app.yaml

My app.yaml:

runtime: python27
api_version: 1
threadsafe: true

handlers:

- url: /.*
  static_files: sep6-app/index.html
  upload: sep6-app/index.html

- url: /.*
  static_dir: sep6-app

Inside GCP, my storage bucket contains:

- app.yaml
- sep6-app/

One thing, if I set the URL's inside app.yaml like this, and then redeploy:

- url: /
  static_files: sep6-app/index.html
  upload: sep6-app/index.html

- url: /
  static_dir: sep6-app

I am able to access my app with no problem, but then if I refresh any of the pages I get the 404 error, which I understand is expected due to the way Angular deals with routes. However I do not understand why having "- url: /.*" works for short time and then stops?

I'm using (in case this is needed):

Angular CLI: 9.1.7
Angular: 9.1.9

Any thoughts or ideas on why this might be happening, and how this can be fixed? Thanks!

Answer 1

Managed to get it working by using the following app.yaml:

runtime: python38
service: default

handlers:
- url: /(.*\.(gif|png|jpg|less|json|woff|woff2|ttf|eot|scss|css|js|ico|svg)(|\.map))$
  static_files: sep6-app/\1
  upload: sep6-app/(.*)(|\.map)
- url: /(.*)
  static_files: sep6-app/index.html
  upload: sep6-app/index.html