Failed to load module script

One possible explanation for the error:
You get this behavior when you deploy your app into a subfolder, not directly on your base-URL. The HTML is found when you go to www.yourbase.com/yoursubfolder/index.html, but as the angular app fetches other resources from www.yourbase.com/resource.css instead of from www.yourbase.com/yoursubfolder/resource.css and your webserver probably serves some default page (maybe your www.yourbase.com/index.html) the content of your CSS becomes the content of that HTML page. That would explain the error.

To fix it build your angular app with:

ng build --prod --base-href yoursubfolder

I got the same error when I try to deploy angular UI in a subfolder of nginx.

Finally, I fixed it. Wish it helpful.

Let's say if you want to host your website https://www.yourdomain.com/sub1/

Step 1: use --base-href to build

ng build --base-href=/sub1/

Step 2: config in nginx

There are 2 ways to host your subfolder.

Assuming that your dist folder locates in html/sub1dist

1)Host local dist as subfolder

server {
    listen       80;
    server_name  localhost;


    location /sub1 {
        alias   html/sub1dist;
        try_files $uri $uri/ /index.html =404;
    }
}

2)Proxy pass another endpoint as subfolder

server {
    listen       80;
    server_name  localhost;

    location /sub1/ {
        # rewrite to remove the subfolder
        rewrite ^/sub1/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8071;
    }
}

server {
    listen       8071;
    server_name  localhost;

    location / {
        root   html/sub1dist;
        try_files $uri $uri/ /index.html =404;
    }
}

Each of above solutions works fine for me.

I had the same error. The culprit was in my express server.js file.

app.use(express.static(__dirname + '/dist/<app-folder-name>'));

// PathLocationStrategy
app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/<app-folder-name>/index.html'));
})

If you don't include your app-folder-name after the dist folder for the express.static method it will result in the MIME type error since it can't locate your Javascript bundles.

Please try this, it worked for me

"server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/server",

Change like below:

"outputPath": "dist/",

You should look into using the X-Content-Type-Options header with the 'nosniff' property on your server.

Essentially, MIME is in place to allow the browser to automatically detect if the content-type being sent is correct for the application. Using the above header and property essentially tells the server - 'I got this'. In turn it should stop the MIME errors.

You can check the mozilla docs on X-Content-Type-Options here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options

it works for me when use angular8 with express:

app.use('/', express.static('classvideo'));

app.get('*', (req,res,next) => {
    const indexFile = path.resolve(__dirname + '/classvideo/index.html');
    res.sendFile(indexFile);
});

If using DotNetCore 3.1 make sure app.UseSpaStaticFiles(); is in Startup.cs.

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.

Make sure to deploy the same build in the servers of load balancing.

There is one possibility that you are using load balancing in deployment and you just update the deployment in one server. Therefore, there are two versions in the deployment.

Due to the loading balancing, the browser resolves the files path in the index.html to different servers with different versions of files. In this case, the missing file points to the index.html itself. That is why you see the issue of loading module.

In my case it was the issue from the server side. Rewriting handled it perfectly. Adding the below code in .htaccess worked perfectly.

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{HTTPS} off
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

For me I just had to clear the browser cache and site starts loading.