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

Question

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

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.

我最终通过将类型模块更改为 text/javascript

来解决这个问题

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

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

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

Answer 1

我在创建 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 src="runtime-es2015.858f8dd898b75fe86926.js" type="module">

并更改它们以包含 MIME 类型：

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

才在电子内部起作用window。但是，如果我运行使用 "ng serve" 进行项目，并查看 angular 提供的网页，那么它就可以正常工作。

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

Answer 2

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

鉴于 Electron 中最新的 Chromium 实例是 72，我将 Chrome >= 70 and Chrome <= 72 添加到文件中。似乎成功了。

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

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

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

Answer 4

我遇到了同样的问题。

创建了一个新项目。

构建了生产版本

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

部署到 NGINX
Chrome 元素检查器

修复

更新tsconfig.json

        "target": "es5",

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

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

希望对大家有所帮助

Answer 5

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

Answer 6

同样的问题不是 Cordova，而是 express 应用程序。事实证明，当我在 angular 8 中执行 ng build 时，它在一个新目录下创建了具有应用程序名称的文件。所以当我运行 ng 构建时，我得到了 dist/<app-name>。

当我尝试运行快速服务器中的应用程序时，我只更新了 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 文件提供服务的 public 目录的位置。例如：

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

Answer 7

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

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

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

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

找到解决方案 here。

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

Angular 8 ng-build throwing MIME error with cordova

angular

angular-cli

angular8

ng-build