Angular 8使用cordova时，ng-build会抛出MIME错误

Question

在构建我的cordova应用时，执行ng build --prod --base-href ./命令时，最终输出的结果会抛出以下错误。

无法加载模块脚本：服务器响应的 MIME 类型为空字符串。根据 HTML 规范，模块脚本强制执行严格的 MIME 类型检查。

我通过将type module更改为text/javascript来解决了这个问题。

src="runtime-es2015.858f8dd898b75fe86926.js" type="module">

src="runtime-es2015.858f8dd898b75fe86926.js" type="text/javascript">

在 angular.json 文件中是否有可以修复这个问题的方法，或者我在这里遗漏了什么？

- Nidhin Joseph

---

你尝试过在开发模式下使用 ng build，而不是生产模式吗？ - Krishanu

开发模式在桌面上运行良好。但是当尝试使用 Cordova 加载到设备时出现问题。 - Nidhin Joseph

问题在 Git 中被提出，但尚未解决。https://github.com/angular/angular/issues/30835 - Nidhin Joseph

Answer 1

我遇到了同样的问题。

1. 创建了一个新项目。

2. 构建了一个生产版本

  "build-production": "ng build --configuration=production --extract-css=false --prod --aot"

部署到NGINX

Chrome元素检查器中标签之间没有内容的白色页面

修复

更新tsconfig.json文件

        "target": "es5",

然后重新构建应用程序并再次部署。

这个解决方案对我有用，现在我已经在我的部署的应用程序中有了内容。

希望对某人有所帮助。

- englishPete

---

这不是一个解决方案，而是一个权宜之计。ES5已经过时了。 - Panos Filianos

那么 ES5 和 ES2015 有什么区别呢？ - Farhad

Answer 2

我创建一个angular / electron应用时遇到类似的问题。我按照这里的步骤进行：

https://alligator.io/angular/electron/

但是当我运行电子应用程序时，只会得到一个空白屏幕。当你使用开发工具检查应用程序时，你会在控制台中得到一些错误消息，例如：

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

这些错误出现在所有存在于dist/index.html文件中的JS包含文件上。

我必须手动处理所有的script标签（像这样）：

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

并将它们更改为包括MIME类型：

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="text/javascript">

只有在电子窗口内部运行时才能正常工作。但是，如果我使用“ng serve”运行项目，并查看Angular提供的网页，则可以正常工作。 我认为这与从文件系统本地加载文件并且未提供MIME类型有关，而当它们从Web服务器提供时，会提供MIME类型。

- John

---

是的，问题仍然存在。我会在 GitHub 上提出并在这里发布链接以进行后续跟进。 - Nidhin Joseph

你是否有一个关于此的GitHub问题？ - ToM

有人尝试禁用差异加载来解决这个问题吗？ - ToM

对于 Cordova，我没有找到比在 tsconfig.json 中使用 "target": "es5" 更好的解决方案，然后再添加另一个脚本来为脚本标签添加类型。 - ToM

@ToM，问题出在Git上，但还没有解决。https://github.com/angular/angular/issues/30835 - Nidhin Joseph

Answer 3

您需要在文件“tsconfig.json”中更改属性“target”为“es5”，请参阅此博客文章“Differential Loading by Default”：https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27。该属性基于浏览器的能力选择现代或旧版的JavaScript： <script type="module" src="…"> // 现代JS，<script nomodule src="…"> // 旧版JS。

- Ameen Rashad

---

虽然这样做从技术上解决了错误，但质量上与说“不要使用 Angular 8”等同。这并不是大多数人想要的答案。 - adamdport

Answer 4

我从未使用过Cordova，但在Nginx中遇到了相同的问题。我的解决方案（没有采用已接受解决方案提出的回归）：将“module”添加到MIME类型中。请参见相关问题

- user11593453

Answer 5

我通过修改根目录中的browserlist文件使我的Electron应用程序（使用Angular 8）正常工作。与您的帖子一样，我也遇到了Mime类型的问题。

我添加了Chrome >= 70 and Chrome <= 72到该文件，因为Electron中最新的Chromium实例是72。看起来解决了问题。

编辑：我意识到您正在使用Cordova，我不太清楚它是构建在什么上面的（例如Chromium）。在这种情况下，请尝试修改您的browserlist以反映早期版本的浏览器。您可能会在此处找到必要的查询https://github.com/browserslist/browserslist。

希望能帮到您。这让我头疼不已。

- Justin Jackson

---

在我的情况下没有做任何事情。 - Anthony

Answer 6

这个问题已经在您的代理服务器中解决了。

因此，问题是，您使用的是什么类型的代理服务器？

如果您正在使用Nginx，则必须像这样配置Nginx代理：

http {
    types {
      module js;
    }
    include       /etc/nginx/mime.types;
    # rest of your config...
}

在这里找到了解决方案这里。

- R. de Ruijter

Answer 7

我曾经遇到过与 Cordova 无关但与 express 应用程序有关的问题。事实证明，当我在 Angular 8 中进行 ng build 时，它会在一个新目录下创建带有应用程序名称的文件。因此，当我运行 ng build 时，我得到了 dist/<app-name>。

当我尝试在 express 服务器中运行应用程序时，我只更新了我的 index.html 路径。

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'dist/<app-name>/index.html'));
});

我的index.html文件中有这些代码行：<script src="runtime-es2015.js" type="module"></script>，它们再次尝试加载index.html而不是.js文件，因此我得到了错误。

我所做的修复措施是更新公共目录的位置，该目录提供了我的javascript和css文件。例如：

app.use(express.static(path.join(__dirname, 'dist/<app-name>')));

- ecosystem31