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 had the same error. The culprit was in my express server.js file.
app.use(express.static(__dirname + '/dist/<app-folder-name>'));// PathLocationStrategyapp.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.
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.