无法加载 Angular 生产构建 - 由于不允许的 MIME 类型（“text/html”），加载模块被阻止

Posted 2023-02-27

【中文标题】无法加载 Angular 生产构建 - 由于不允许的 MIME 类型（“text/html”），加载模块被阻止

【英文标题】：Angular production build can't load - Loading module was blocked because of a disallowed MIME type (“text/html”)

【发布时间】：2020-05-23 02:11:02

【问题描述】：

我构建了运行 ng build --configuration=production 的应用程序并将其上传（通过 FTP 手动）到服务器（我尝试了两个不同的）。像 myurl.com 这样访问根目录可以正常工作，但是每当我想直接访问子页面时，例如 myurl.com/subpage 页面都是空白的，并且出现以下错误： Loading module from “https://myurl.com/runtime-es2015.js” was blocked because of a disallowed MIME type (“text/html”). polyfills-es2015.js、main-es2015.js 也有同样的错误

如果我访问根目录并导航到子页面，一切正常。

到目前为止，我一直在尝试：

在 index.html 中设置 <base href=".">

在 tsconfig.json 中设置 "target": "es5"

手动将脚本类型从type="module"更改为type="text/javascript" 喜欢这里：<script src="runtime-es2015.js" type="text/javascript">

Angular CLI 和 Angular 版本8.1

打字稿版本3.4.5

Webpack 版本4.35.2

在服务器上，我还需要一个 .htaccess 文件，否则访问 myurl.com/subpage 会导致 404

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteRule . /index.html [L]
</IfModule>

如果有人可以帮助我，我将非常感激。

编辑 在 ng serve 期间访问“子页面”可以正常工作！

编辑2 在浏览器的开发控制台中检查“网络”选项卡时，对 .js 文件的 GET 请求工作正常，但类型错误（html）。 如果我加载根页面 (myurl.com)，则 mime-type 是正确的。

【问题讨论】：

我遇到了同样的问题，我已经提到了我是如何解决的。有一个类似的帖子。请参考这篇帖子***.com/a/62226117/12080473 有时控制台中的错误消息会误导问题的实际原因。

【参考方案1】：

我在部署到 https://host.my/app 的 Angular 应用程序中遇到了类似的问题。正如other SO answer 中提到的那样，改变了

<base href="/">

到

<base href="./">

为我解决了。只是将其设置为 <base href="."> 没有。

HTH