amplify-cli: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

Describe the bug Just added a new project and I am using production deployment using CloudFront and S3 hosting. I have an Angular project and when I try to access the deployed code I’m getting:

runtime-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
polyfills-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
styles-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
scripts.js:1 Uncaught SyntaxError: Unexpected token <
main-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

To Reproduce Steps to reproduce the behavior:

amplify publish
See error

Expected behavior Angular app should load.

Note: I did not have this same problem with just a dev environment … Angular projects worked like a charm.

Desktop (please complete the following information):

OS: mac
Browser chrome
Version:

> amplify --version
1.10.0

Additional context

I had to change the Origin Path “Origins” via the CloudFront Distributions console. This was adjusted to be:

/example-site-20190806163113-hostingbucket-prod/example-site

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 21 (7 by maintainers)

Most upvoted comments

OK, so after a lot of pain … I think I finally figured it out. @UnleashedMind - you were correct, it was an angular issue all the way. The issue: angular.json had the outputPath set to dist/example-site:

AFAIK, this is the default for Angular. Here is the config with some more context:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "example-site": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/example-site",
...

Changing that to:

            "outputPath": "dist/"

Made all the problems go away. I really can’t believe it took this long to figure out … the whole time I thought this was a CloudFront/S3 issue …

Also of note: I left the Origin Path variable blank (the default) in the CloudFront Origin settings. I’m happy that this is the case as well.

I did have to set permissions to grant public access in S3, which was painful, but after setting the ACL and the bucket policy correctly … life was better.

Thanks for all your help.

+23

malcomm on Aug 16, 2019

If you are deploying your build inside the folder in your server, then while generating the prod build make sure you add the folder to the --base-href flag and the folder path. Following is the command if you are deploying inside the “www” folder

ng build --prod --base-href /www/

sandy912 on Jun 22, 2020

@malcomm Thanks for your feedbacks. Could you give us more details:

What Angular version are you using?
When you said “Note: I did not have this same problem with just a dev environment”, Did you mean using ng serve? or using the Amplify CLI hosting feature in the DEV setup? in which only the S3 bucket is used, and no CloudFront is involved. If it’s the former, it might be related to this issue someone posted on stackoverflow: https://stackoverflow.com/questions/56662215/mime-type-issue-in-angular
When you said “I had to change the Origin Path “Origins” via the CloudFront Distributions console. This was adjusted to be: /example-site-20190806163113-hostingbucket-prod/example-site” Why did you have to make that change? what’s the original value that the Amplify CLI set?

UnleashedMind on Aug 15, 2019