加载模块脚本失败

Question

在 Heroku 上部署 Angular 应用程序后，到达 URL 时会显示一个空白页面，并且控制台显示 MIME 类型错误。

错误是：

加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。每个 HTML 规范对模块脚本执行严格的 MIME 类型检查。

Answer 1

错误的一种可能解释：
当您将应用程序部署到子文件夹而不是直接在您的基本 URL 上时，您会出现此行为。当您转到 时会找到 HTML www.yourbase.com/yoursubfolder/index.html，但是由于 Angular 应用程序从而www.yourbase.com/resource.css不是从 from获取其他资源，www.yourbase.com/yoursubfolder/resource.css并且您的网络服务器可能提供某些默认页面（可能是您的www.yourbase.com/index.html），因此您的 CSS 内容成为该 HTML 页面的内容。这将解释错误。

要修复它，请使用以下命令构建您的 Angular 应用程序：

ng build --prod --base-href yoursubfolder

Answer 2

当我尝试在 nginx 的子文件夹中部署 Angular UI 时，出现了同样的错误。

最后，我修好了。希望有帮助。

假设您想托管您的网站https://www.yourdomain.com/sub1/

第1步：使用--base-href构建

ng build --base-href=/sub1/

第二步：在nginx中进行配置

有两种方法可以托管您的子文件夹。

假设您的 dist 文件夹位于 html/sub1dist

1）将本地 dist 作为子文件夹

server {
    listen       80;
    server_name  localhost;


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

2）代理将另一个端点作为子文件夹传递

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;
    }
}

上述每个解决方案都适合我。

Answer 3

我有同样的错误。罪魁祸首在我的 express server.js 文件中。

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'));
})

如果您没有在 express.static 方法的 dist 文件夹之后包含您的 app-folder-name，它将导致 MIME 类型错误，因为它无法找到您的 Javascript 包。

Answer 4

您应该考虑在服务器上使用带有“nosniff”属性的 X-Content-Type-Options 标头。

本质上，MIME 的作用是让浏览器自动检测发送的内容类型对于应用程序是否正确。使用上面的标头和属性本质上告诉服务器-“我得到了这个”。反过来它应该停止 MIME 错误。

您可以在此处查看有关 X-Content-Type-Options 的 mozilla 文档： https:
//developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options