Question

我尝试部署Angular / CLI 6.12.0项目。

当我在服务器上放置“ dist”文件夹内容时，出现控制台错误 “ 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

这对我来说是法语^^。您可以在控制台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帖子：https://github.com/angular/angular-cli/issues/10325 。这是相同的问题，我尝试了一些解决方案，但没有任何效果。

仅与es2015.*.js个文件有关。因此，我认为type="module"存在一个无法像Javascript文件那样识别的问题。我不明白为什么Angular无法管理它。

修改：10月25日：

尝试将type="module"替换为type="application/javascript"。不要工作Source
尝试再次使用ng update @angular/cli @angular/core --allow-dirty和ng build --prod更新Angular / CLI和Angular / core。不工作
尝试使用Firebase托管它。相同的问题：https://bibliang.firebaseapp.com/

感谢您的帮助！：）

Answer 1

这是因为项目工作区中的dist文件夹。有两种对我有用的解决方案：

Sol 1.在dist文件夹中，可能有一个名为项目名称的文件夹，将该文件夹的所有文件移至dist文件夹，然后将server.js文件中的目录位置更改为dist/index.html。 / p>

将所有文件从dist/you_project_name移至dist/

然后将server.js文件'dist / you_project_name'中的目录位置更改为'dist /'

Sol2。您可以更改index.html文件中所有导致错误的标记的src属性，例如::

<script src="runtime-es2015.js" type="module">

更改为

<script src="folder_name_inside_the_dist_dir/runtime-es2015.js" type="module">

Answer 2

 <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>

它将起作用

部署Angular Project错误类型MIME（text / html）

2 个答案: