时间戳

首页 > 解决方案 > 部署 Angular 项目错误类型 MIME (text/html)

javascript - 部署 Angular 项目错误类型 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 »).

https://imgur.com/fQKnWAg.jpg

这对我来说是法语^^。您可以在控制台中看到它http://biblio.sylvainallain.fr

它是一个像图书馆一样的简单应用程序。后端（日志和数据）由 Firebase 管理。

在本地，一切正常。

我使用“ng build --prod”进行构建，它创建了一个“dist”文件夹。

我的 index.html 在 prod 之后：

<!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 日：

感谢帮助 ！:)

标签： javascriptangulardeploymentbuildmime-types

解决方案

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

Sol 1. 在您的 dist 文件夹中，可能有一个名为您的项目名称的文件夹将该文件夹的所有文件移动到 dist 文件夹，然后将 dir 位置更改为dist/index.htmlin server.js 文件。

将所有文件从 移动dist/you_project_name到dist/

然后将 server.js 文件 'dist/you_project_name' 中的 dir 位置更改为 '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">

推荐阅读