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

Time:03-05

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?

CodePudding user response:

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

  • Related