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

[malcomm]

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:

1. amplify publish
2. 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

[malcomm]

@SwaySway @UnleashedMind @kaustavghosh06 - any updates on this? This is blocking me from deploying to production. Thanks!

[UnleashedMind]

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

1. What Angular version are you using?

1. 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

2. 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?

[malcomm]

@UnleashedMind

1. What Angular version are you using?

8.2.0

> ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.2.0
Node: 10.15.3
OS: darwin x64
Angular: 8.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.0
@angular-devkit/build-angular     0.802.0
@angular-devkit/build-optimizer   0.802.0
@angular-devkit/build-webpack     0.802.0
@angular-devkit/core              8.2.0
@angular-devkit/schematics        8.2.0
@ngtools/webpack                  8.2.0
@schematics/angular               8.2.0
@schematics/update                0.802.0
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0

2. Dev setup:

Amplify CLI hosting feature configured for DEV:

> amplify status

Current Environment: exampledev

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Auth     | cognito4dcde697 | No Change | awscloudformation |
| Api      | avdrapi         | No Change | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

GraphQL endpoint: https://example.appsync-api.us-west-2.amazonaws.com/graphql
Hosting endpoint: http://example-20190415080918-hostingbucket-avdrdev.s3-website-us-west-2.amazonaws.com

3. Why did you have to make that change? what's the original value that the Amplify CLI set?

It was set to blank. I set it to /example-site-20190806163113-hostingbucket-prod/example-site because the S3 bucket deployed the resources using that path. My Angular app is designed to be hosted using a base href of "/":

<base href="/">

[malcomm]

@UnleashedMind - oh and the last thing I had to do was make the resources public.

[malcomm]

@UnleashedMind - Re: https://stackoverflow.com/questions/56662215/mime-type-issue-in-angular

So, when looking to try and solve this myself, I went into S3 and looked at the files in question. Let's take runtime-es2015.js for example. I looked at the metadata in S3 and I see this:

So as far as I can tell, the mime type should be correct with application/javascript.

[UnleashedMind]

So you used the hosting feature with the DEV setup, which does not include a CloudFront.
Then you configured your own CloudFront and linked to the S3 hosting bucket?

[UnleashedMind]

This might be an Angular issue, I've heard people having issues with Angular version 8+

[malcomm]

@UnleashedMind - so the first setup is a DEV environment. I was about to add a second environment using:

amplify env

for production, but I thought I'd create a very simple Angular project that will act as a homepage. So in this case, I created a brand new project and just added CloudFront + S3 for hosting. Since that didn't work, I did not move forward with adding the env for production.

[UnleashedMind]

could you try to use a lower version of Angular and see if it works? We've tested version 6.x and it was working.

[UnleashedMind]

For the 3 point, you can change the hosting configuration locally
run amplify configure project and when prompted with the

Distribution Directory Path:

enter: dist/<your project name>

Angular used to put the built artifacts directly under the dist folder, now it puts everything under a sub-folder named after the project.

Then all the contents will be uploaded to the "root" folder inside the S3 bucket.

[malcomm]

@UnleashedMind - downgrading to v6.x might be a bit of an issue for me. But the reason I don't think this is an Angular problem is that the only change here ... that is to say, it worked with the DEV instance and the only thing added was prod CloudFront.

I just published a new version ... and I can't get the CloudFront or S3 configuration correct to allow access to hit the URL. No matter what I do ... permissions for CloudFront/S3 are confusing and frustrating .........................

[UnleashedMind]

Did you try what I suggested on my last comment:

1. run amplify configure project and when prompted with the
   Distribution Directory Path:
   enter: dist/<your project name>
2. run amplify publish again

This will make "configuration correct to allow access to hit the URL"

I tested some simple angular projects with angular version 6.x and 8.x, both were actually working correctly.

[malcomm]

@UnleashedMind - as far as I can tell, all that does is create an extra /<your project name> directory in the S3 container.

[malcomm]

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.

[UnleashedMind]

I'm glad your issue is resolved.

[renanlopesluis]

thanks, @malcomm ! I had the same issue and got to solve it with your solution :D

[montumontu]

thanks @malcomm same issue, took hours and finally saved, i was getting trouble on heroku

[sandy912]

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/

[LewisMorgans]

I am having the same issue.

Serving my angular 9 application the same way I always have, and this is the first I'm experiencing this issue.

my express app.js is located in another folder to my Angular project. Below is my folder structure:

• client

  • dist

• middle-tier

  • app.js

app.use(express.static(__dirname + '/dist'));

app.get('*/', (req, res) => { 
    const indexFile = path.join(__dirname, '../client/dist/index.html');
    res.sendFile(indexFile);
})

The file path is correct, I've consoled logged it and it all adds up. I changed the output path in the angular.json also to just dist instead of having another subfolder.

I still get this error. Can anyone help?

[memartinez06]

In my case, I had the same problem publishing an Angular 9 application on an IIS 8 server. The error only occurred on the customer's machine and not on mine. The reason was this: In my machine I published the application indicating in the baseRef that it would be inside a folder myFolder within the Site. In the case of my customer, he did not create the folder within an existing site, but instead created the folder and a new site that points directly to it. The solution in my case was to generate the publish without specifying the baseRef (just ng build --prod).

In short, the error is that the server cannot locate the project files according to how it was compiled.