[英]Deployment Angular Project error type MIME (text/html)
I try to deploy an Angular/CLI 6.12.0 project.我尝试部署一个 Angular/CLI 6.12.0 项目。
When I put "dist" folder content on a server, there is a console error "type MIME".当我将“dist”文件夹内容放在服务器上时,出现控制台错误“type MIME”。
Le chargement du module à l’adresse « http://www.sylvainallain.fr/polyfills-es2015.fd917e7c3ed57f282ee5.js » a été bloqué en raison d’un type MIME interdit (« text/html »).
Le chargement du module à l’adresse « http://www.sylvainallain.fr/main-es2015.2fcd6517edb1de962f8a.js » a été bloqué en raison d’un type MIME interdit (« text/html »).
Le chargement du module à l’adresse « http://www.sylvainallain.fr/runtime-es2015.24b02acc1f369d9b9f37.js » a été bloqué en raison d’un type MIME interdit (« text/html »).
https://imgur.com/fQKnWAg.jpg https://imgur.com/fQKnWAg.jpg
This in French for me ^^.这对我来说是法语^^。 You can see it in console here http://biblio.sylvainallain.fr您可以在控制台中看到它http://biblio.sylvainallain.fr
It's a simply application like a library.它是一个像图书馆一样的简单应用程序。 Back-end (logs and data) is manage with Firebase.后端(日志和数据)由 Firebase 管理。
In local, all is OK.在本地,一切正常。
I make the build with "ng build --prod", it create a "dist" folder.我使用“ng build --prod”进行构建,它创建了一个“dist”文件夹。
My index.html after prod:产品后我的 index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bibliothèque Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.735ba4029395bfd97371.css"></head>
<body>
<app-root></app-root>
<script src="polyfills-es5.f9fad3ad3c84e6dbdd72.js" nomodule defer></script>
<script src="polyfills-es2015.fd917e7c3ed57f282ee5.js" type="module"></script>
<script src="runtime-es2015.24b02acc1f369d9b9f37.js" type="module"></script>
<script src="main-es2015.2fcd6517edb1de962f8a.js" type="module"></script>
<script src="runtime-es5.24b02acc1f369d9b9f37.js" nomodule defer></script>
<script src="main-es5.2fcd6517edb1de962f8a.js" nomodule defer></script></body>
</html>
I find this GitHub post: https://github.com/angular/angular-cli/issues/10325 .This is the same issue, I try some solutions but nothing work.我发现这个 GitHub 帖子: https://github.com/angular/angular-cli/issues/10325 。这是同样的问题,我尝试了一些解决方案,但没有任何效果。
The issue is only with es2015.*.js
files.问题仅与es2015.*.js
文件有关。 So I think there is an issue with type="module"
which is not recognize like a Javascript file.所以我认为type="module"
存在一个问题,它不像 Javascript 文件那样被识别。 I don't understand why Angular don't manage it.我不明白为什么 Angular 不管理它。
Edit 25 October: 10 月 25 日编辑:
try to replace type="module"
with type="application/javascript"
.尝试将type="module"
替换为type="application/javascript"
。 Don't work.不要工作。 Source 资源
try to update Angular/CLI & Angular/core with ng update @angular/cli @angular/core --allow-dirty
and ng build --prod
again.尝试使用ng update @angular/cli @angular/core --allow-dirty
和ng build --prod
再次更新 Angular/CLI 和 Angular/core。 Don't work不工作
try to host it with Firebase.尝试使用 Firebase 托管它。 Same issue: https://bibliang.firebaseapp.com/同样的问题: https://bibliang.firebaseapp.com/
Thanks for help: :)感谢帮助: :)
This is because of dist folder in your project workspace.这是因为项目工作区中的 dist 文件夹。 There are two solutions that worked for me:有两种解决方案对我有用:
Sol 1. In your dist folder there may a folder named as your project name move all the files of that folder to the dist folder and then change the dir location to the dist/index.html
in server.js file. Sol 1. 在您的 dist 文件夹中,可能有一个名为您项目名称的文件夹将该文件夹的所有文件移动到 dist 文件夹,然后将 dir 位置更改为 server.js 文件中的dist/index.html
。
Move all files from dist/you_project_name
to dist/
将所有文件从dist/you_project_name
移动到dist/
Then change the dir location in server.js file 'dist/you_project_name' to 'dist/'然后将 server.js 文件 'dist/you_project_name' 中的 dir 位置更改为 'dist/'
Sol 2. You can change the src attribute of all error causing tags in index.html file, like:: Sol 2. 您可以更改 index.html 文件中所有导致错误的标签的 src 属性,例如:
<script src="runtime-es2015.js" type="module">
changed to变成
<script src="folder_name_inside_the_dist_dir/runtime-es2015.js" type="module">
<script src="polyfills-es2015.fd917e7c3ed57f282ee5.js" type="module"></script>
<script src="runtime-es2015.24b02acc1f369d9b9f37.js" type="module"></script>
<script src="main-es2015.2fcd6517edb1de962f8a.js" type="module"></script>
keep all above file in another folder and give path here like
<script src="../../js/polyfills-es2015.fd917e7c3ed57f282ee5.js" type="text/javascript"></script>
it will work它会起作用的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.