Resolving mime type issues for Angular project hosted on Google App Engine

Question

I've just deployed my Angular (8) project to Google App Engine and sometimes my website loads, and other times I encounter this error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. I can't figure out what the pattern is for why it seems fine and then gives up.

The error message appears for these files:

runtime-es2015.cdfb0ddb511f65fdc0a0.js
polyfills-es2015.ffa9bb4e015925544f91.js
main-es2015.10e52dfadb49c8bec6fe.js

In case it's relevant, when I have had it load, I have experienced something similar to this problem where pages other than the landing page do not reload on refresh.

My app.yaml:

runtime: python27
api_version: 1
threadsafe: yes

handlers:
    - url: /(.*)
      static_files: dist/build/index.html
      upload: dist/build/index.html

    - url: /
      static_dir: dist/build

    - url: /(.*\.js)$
      secure: always
      static_files: dist/build/\1
      upload: dist/build/.*\.js$
      mime_type: application/javascript

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

Any ideas?

Hi @shainanana, Can you try to remove the mime_type: application/javascript in your app.yaml and see it if works? Also can you add the file extensions in the first handler as also mentioned in this SO post? — Catherine O
– Catherine O, Commented Mar 4, 2022 at 5:40

Catherine O · Accepted Answer · 2022-03-05 08:16:10Z

1

Try to remove the mime_type: application/javascript in your app.yaml then add the file extensions in the first handler in case your app uses more.

Sample app.yaml:

runtime: python27
api_version: 1
threadsafe: yes

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

    - url: /(.*)
      static_files: dist/index.html
      upload: dist/index.html
      
skip_files:
    - e2e/
    - node_modules/
    - src/
    - coverage
    - ^(.*/)?\..*$
    - ^(.*/)?.*\.json$
    - ^(.*/)?.*\.md$
    - ^(.*/)?.*\.yaml$
    - ^LICENSE

answered Mar 5, 2022 at 8:16

Catherine O

1,0213 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Resolving mime type issues for Angular project hosted on Google App Engine

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related