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

Question

在执行 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 文件中进行修复，或者我在这里遗漏了什么？

Answer 1

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

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

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

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

找到解决方案here。

Answer 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>')));

Answer 3

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

Answer 4

我遇到了同样的问题。

1. 创建了一个新项目。

2. 构建生产版本

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

3. 部署到 NGINX

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

修复

更新 tsconfig.json

        "target": "es5",

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

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

希望对某人有所帮助

Answer 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 类型。

Answer 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

Answer 7

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

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

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

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