Angular 8 ng-build 使用科尔多瓦抛出 MIME 错误

Posted 2023-03-15

【中文标题】Angular 8 ng-build 使用科尔多瓦抛出 MIME 错误

【英文标题】：Angular 8 ng-build throwing MIME error with cordova

【发布时间】：2019-10-29 14:23:52

【问题描述】：

在执行 ng build --prod --base-href ./ 以构建我的 cordova 应用程序时，最终输出会引发如下错误。

加载模块脚本失败：服务器以非 javascript MIME 类型“”响应。强制执行严格的 MIME 类型检查 用于每个 html 规范的模块脚本。

我确实通过将 type 模块更改为 text/javascript 来解决这个问题

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

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

是否可以在 angular.json 文件中进行修复，或者我在这里遗漏了什么？

【问题讨论】：

你试过 ng build 在 dev 模式下，而不是 prod 模式下吗？

开发模式在桌面上运行良好。尝试使用 cordova 加载到设备时出现问题。

问题在 git 中提出，但未解决。 github.com/angular/angular/issues/30835

【参考方案1】：

此问题已在您的代理中解决。

因此问题是，您使用的是哪种代理？

如果您使用的是 nginx。您必须像这样配置 Nginx 代理：

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

找到解决方案here。

【参考方案2】：

不是 Cordova 而是 Express 应用程序也有同样的问题。事实证明，当我在 Angular 8 中进行 ng 构建时，它在具有应用程序名称的新目录下创建了文件。所以当我运行 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>')));

【参考方案3】：

从未使用过 Cordova，但在使用 Nginx 时遇到了同样的问题。我实施的解决方案（没有公认解决方案提出的回归）：将“模块”添加到 MIME 类型。见related question

【参考方案4】：

我遇到了同样的问题。

创建了一个新项目。

构建生产版本

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

部署到 NGINX

Chrome Element 检查器中标签之间没有内容的白页

修复

更新 tsconfig.json

        "target": "es5",

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

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

希望对某人有所帮助

【讨论】：

这不是解决方案，而是一种解决方法。 ES5 是遗留的。

那么 es5 和 es2015 有什么区别？

【参考方案5】：

在创建 Angular / 电子应用程序时，我遇到了同样的问题（类似）。

我按照这里的步骤操作：

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

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

加载模块脚本失败：服务器响应 “”的非 JavaScript MIME 类型。强制执行严格的 MIME 类型检查 用于每个 HTML 规范的模块脚本。

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

我必须手动浏览所有脚本标签（像这样）：

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

并将它们更改为包含 mime 类型：

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

只有这样它才能在电子窗口内工作。但是，如果我使用“ng serve”运行项目，并查看由 angular 提供的网页，那么它工作得很好。

我认为这与从文件系统本地加载的文件而不提供 mime 类型有关，而当它们从 web 服务器提供时，提供了 mime 类型。

【讨论】：

是的，问题仍然存在。我会在 GitHub 中提出这个问题并在此处发布链接以跟进。

你有这方面的 GitHub 问题吗？

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

不幸的是，对于科尔多瓦，我没有找到更好的解决方案，然后在 tsconfig.json: "target": "es5" 中使用，然后是另一个将类型添加到脚本标签的脚本。

@ToM 问题出在 git 中，但未解决。 github.com/angular/angular/issues/30835

【参考方案6】：

您必须将文件“tsconfig.json”中的属性“target”更改为“es5”。阅读这篇博文，“默认差异加载”：

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

【讨论】：

虽然这在技术上解决了错误，但在质量上等同于说“不要使用 angular 8”。这不是我们大多数人都在寻找的答案。

【参考方案7】：

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

鉴于 Electron 中最新的 Chromium 实例为 72，我将 Chrome >= 70 and Chrome <= 72 添加到文件中。似乎可以解决问题。

编辑：我知道您正在使用 Cordova，但我不太清楚它是基于什么构建的（例如 Chromium）。在这种情况下，请尝试修改您的浏览器列表以反映早期版本的浏览器。您可能会在此处找到实现此目的所需的查询：https://github.com/browserslist/browserslist

希望这会有所帮助。让我很头疼。

【讨论】：

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