New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html" #1995
Comments
@SwaySway @UnleashedMind @kaustavghosh06 - any updates on this? This is blocking me from deploying to production. Thanks! |
@malcomm
|
1. What Angular version are you using? 8.2.0
2. Dev setup: Amplify CLI hosting feature configured for DEV:
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
|
@UnleashedMind - oh and the last thing I had to do was make the resources public. |
@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 So as far as I can tell, the mime type should be correct with |
So you used the hosting feature with the DEV setup, which does not include a CloudFront. |
This might be an Angular issue, I've heard people having issues with Angular version 8+ |
@UnleashedMind - so the first setup is a DEV environment. I was about to add a second environment using:
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. |
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. |
For the 3 point, you can change the hosting configuration locally
enter: Angular used to put the built artifacts directly under the Then all the contents will be uploaded to the "root" folder inside the S3 bucket. |
@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 ......................... |
Did you try what I suggested on my last comment:
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. |
@UnleashedMind - as far as I can tell, all that does is create an extra |
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: AFAIK, this is the default for Angular. Here is the config with some more context:
Changing that to:
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 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. |
I'm glad your issue is resolved. |
thanks, @malcomm ! I had the same issue and got to solve it with your solution :D |
thanks @malcomm same issue, took hours and finally saved, i was getting trouble on heroku |
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
|
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:
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? |
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. |
This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs. Looking for a help forum? We recommend joining the Amplify Community Discord server |
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:
To Reproduce
Steps to reproduce the behavior:
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):
Additional context
I had to change the Origin Path "Origins" via the CloudFront Distributions console. This was adjusted to be:
The text was updated successfully, but these errors were encountered: