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?

Answer 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