部署 Angular 项目错误类型 MIME (text/html)
Deployment Angular Project error type MIME (text/html)
我尝试部署一个 Angular/CLI 6.12.0 项目。
当我将 "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 »).
这对我来说是法语^^。
您可以在此处的控制台中看到它 http://biblio.sylvainallain.fr
这是一个像图书馆一样简单的应用程序。
后端(日志和数据)由 Firebase 管理。
在本地,一切正常。
我使用 "ng build --prod" 进行构建,它创建了一个 "dist" 文件夹。
我的 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>
我找到这个 GitHub post: https://github.com/angular/angular-cli/issues/10325
.这是同一个问题,我尝试了一些解决方案,但没有任何效果。
问题仅存在于 es2015.*.js
个文件中。所以我认为 type="module"
存在一个问题,它不像 Javascript 文件那样被识别。
我不明白为什么 Angular 不管理它。
编辑 10 月 25 日:
尝试用 type="application/javascript"
替换 type="module"
。不要工作。
再次尝试用 ng update @angular/cli @angular/core --allow-dirty
和 ng build --prod
更新 Angular/CLI & Angular/core。不工作
尝试使用 Firebase 托管它。同样的问题:https://bibliang.firebaseapp.com/
感谢帮助! :)
<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>
它会起作用
这是因为您的项目工作区中有 dist 文件夹。有两种解决方案对我有用:
Sol 1. 在你的 dist 文件夹中可能有一个以你的项目名称命名的文件夹,将该文件夹中的所有文件移动到 dist 文件夹,然后将目录位置更改为 [=29= 中的 dist/index.html
] 文件。
将所有文件从 dist/you_project_name
移动到 dist/
然后将 server.js 文件 'dist/you_project_name' 中的目录位置更改为 'dist/'
Sol 2. 您可以更改 index.html 文件中所有导致错误的标签的 src 属性,例如 ::
<script src="runtime-es2015.js" type="module">
改为
<script src="folder_name_inside_the_dist_dir/runtime-es2015.js" type="module">
我尝试部署一个 Angular/CLI 6.12.0 项目。
当我将 "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 »).
这对我来说是法语^^。 您可以在此处的控制台中看到它 http://biblio.sylvainallain.fr
这是一个像图书馆一样简单的应用程序。 后端(日志和数据)由 Firebase 管理。
在本地,一切正常。
我使用 "ng build --prod" 进行构建,它创建了一个 "dist" 文件夹。
我的 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>
我找到这个 GitHub post: https://github.com/angular/angular-cli/issues/10325 .这是同一个问题,我尝试了一些解决方案,但没有任何效果。
问题仅存在于 es2015.*.js
个文件中。所以我认为 type="module"
存在一个问题,它不像 Javascript 文件那样被识别。
我不明白为什么 Angular 不管理它。
编辑 10 月 25 日:
尝试用
type="application/javascript"
替换type="module"
。不要工作。再次尝试用
ng update @angular/cli @angular/core --allow-dirty
和ng build --prod
更新 Angular/CLI & Angular/core。不工作尝试使用 Firebase 托管它。同样的问题:https://bibliang.firebaseapp.com/
感谢帮助! :)
<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>
它会起作用
这是因为您的项目工作区中有 dist 文件夹。有两种解决方案对我有用:
Sol 1. 在你的 dist 文件夹中可能有一个以你的项目名称命名的文件夹,将该文件夹中的所有文件移动到 dist 文件夹,然后将目录位置更改为 [=29= 中的 dist/index.html
] 文件。
将所有文件从 dist/you_project_name
移动到 dist/
然后将 server.js 文件 'dist/you_project_name' 中的目录位置更改为 'dist/'
Sol 2. 您可以更改 index.html 文件中所有导致错误的标签的 src 属性,例如 ::
<script src="runtime-es2015.js" type="module">
改为
<script src="folder_name_inside_the_dist_dir/runtime-es2015.js" type="module">