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

标签 angular angular-cli angular8 ng-build

我构建了运行 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

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

到目前为止，我尝试:

设置<base href=".">在 index.html 中
设置"target": "es5"在 tsconfig.json 中
手动更改 type="module" 中的脚本类型至 type="text/javascript" 喜欢这里:<script src="runtime-es2015.js" type="text/javascript">

Angular CLI 和 Angular 版本 8.1

typescript 版本 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 类型是正确的。

最佳答案

我在部署到 https://host.my/app 的 Angular 应用程序中遇到了类似的问题.如 other SO answer 中所述改变

<base href="/">

到

<base href="./">

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

HTH

关于Angular 生产构建无法加载 - 由于不允许的 MIME 类型 (“text/html”，加载模块被阻止)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60104991/