Question

在herocu上部署有角度的应用程序后，到达URL时将显示空白页面，并在控制台中显示MIME类型错误。

错误是：

无法加载模块脚本：服务器回应为非JavaScript MIME类型的“文本/ html”。严格的MIME类型检查是根据HTML规范对模块脚本强制执行。

Answer 1

当与express一起使用angular8时，它对我有用：

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

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

Answer 2

请尝试一下，它对我有用

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

更改如下：

"outputPath": "dist/",

Answer 3

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

要对其进行修复，请使用以下工具构建您的角度应用程序：

www.yourbase.com/index.html

Answer 4

您应该研究将X-Content-Type-Options标头与服务器上的'nosniff'属性一起使用。

从本质上讲，MIME是允许浏览器自动检测要发送的内容类型对于应用程序是否正确的。使用上面的标头和属性实际上告诉服务器-“我知道了”。反过来，它应该停止MIME错误。

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

Answer 5

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

    StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();

    StrictMode.setThreadPolicy(policy);

如果您在express.static方法的dist文件夹之后没有包括app-folder-name，则会由于无法找到Javascript捆绑包而导致MIME类型错误。

Answer 6

如果使用 DotNetCore 3.1 ，请确保 app.UseSpaStaticFiles（）; 位于 Startup.cs 中。

Answer 7

当我尝试在nginx的子文件夹中部署角度UI时，我遇到了相同的错误。

最后，我修复了它。希望对您有所帮助。

如果您要托管网站https://www.yourdomain.com/sub1/

步骤1：使用--base-href进行构建

ng build --base-href=/sub1/

第2步：在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 8

就我而言，这是服务器端的问题。重写完美地处理了它。在.htaccess中添加以下代码非常有效。

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

Answer 9

就我而言，我在IIS 8服务器上发布Angular 9应用程序时遇到了同样的问题。该错误仅发生在客户的机器上，而不是我的。原因是：在我的机器上，我发布了该应用程序，在baseRef中指示该应用程序将位于站点内的myFolder文件夹中。对于我的客户，他没有在现有站点内创建文件夹，而是创建了文件夹和一个直接指向该文件夹的新站点。在我的情况下，解决方案是在不指定baseRef的情况下生成发布（只需ng build --prod）。

简而言之，错误是服务器无法根据编译方式找到项目文件。

加载模块脚本失败

9 个答案: