Angular生产版本无法加载-由于不允许的MIME类型("text/html")，加载模块被阻止 [英] Angular production build can't load - Loading module was blocked because of a disallowed MIME type (“text/html”)

问题描述

我运行ng build --configuration = production构建了我的应用程序，并将其(手动通过FTP)上传到服务器(我尝试了两个不同的服务器).像myurl.com这样访问根目录可以很好地工作，但是每当我想直接访问一个子页面时，例如myurl.com/subpage，该页面都是空白的，并且出现以下错误:由于不允许的MIME类型("text/html")，阻止了从"https://myurl.com/runtime-es2015.js"加载模块. 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开RewriteBase/RewriteRule ^ index \ .html $-[L]RewriteCond％{REQUEST_FILENAME}！-fRewriteCond％{REQUEST_FILENAME}！-dRewriteRule./index.html [L]</IfModule> 

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

修改在ng服务期间访问子页面"工作正常！

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

解决方案

我在部署到 https://host.my/app 的Angular应用程序中遇到了类似的问题.如其他解决方案中所述

< base href ="/">

到

< base href ="./">

为我解决了.只是将其设置为< base href =."> 即可.

HTH

I built my application running ng build --configuration=production and uploaded it (manually via FTP) to a server (I tried two different ones). Accessing the root like myurl.com works fine, but whenever I want to directly access a subpage, for example, myurl.com/subpage the page is blank and I get the following error: Loading module from "https://myurl.com/runtime-es2015.js" was blocked because of a disallowed MIME type ("text/html"). Same error for also for polyfills-es2015.js, main-es2015.js

If I access the root and navigate to the subpage everything works fine.

Until now I tried to:

• set <base href="."> in index.html

• set "target": "es5" in tsconfig.json

• manually change the type of the scripts from type="module" to type="text/javascript" like here: <script src="runtime-es2015.js" type="text/javascript">

Angular CLI & Angular Version 8.1

Typescript version 3.4.5

Webpack version 4.35.2

On the server, I also have a .htaccess file which was needed, as otherwise accessing myurl.com/subpage resulted in a 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>

I would be really thankful, if somebody could help me.

Edit Accessing the "subpage" during ng serve works fine!

Edit2 When inspecting the Network tab in the development console on the browser, the GET requests for the .js files work fine, but the type is wrong (html). If I load the root page (myurl.com) the mime-type is correct.

解决方案

I had a similar problem with an Angular app I deployed to https://host.my/app. As mentioned in other SO answer changing the

<base href="/">

to

<base href="./">

solved it for me. Just setting it to <base href="."> did not.

HTH

这篇关于Angular生产版本无法加载-由于不允许的MIME类型("text/html")，加载模块被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！