34

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

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

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

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

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

有没有可以在 angular.json 文件中修复的东西，或者我在这里遗漏了什么？

4

7 回答 7

21

我遇到过同样的问题。

  1. 创建了一个新项目。

  2. 构建了一个生产版本

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

  3. 部署到 NGINX

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

使固定

更新 tsconfig.json

        "target": "es5",

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

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

希望它可以帮助某人

于 2019-09-01T13:53:11.813 回答
9

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

我按照这里的步骤操作：

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

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

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

这些出现在 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 类型。

于 2019-06-24T18:30:12.147 回答
7

您必须将文件“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

于 2019-08-01T13:02:35.880 回答
2

从未使用过 Cordova，但在使用 Nginx 时遇到了同样的问题。我实施的解决方案（没有接受的解决方案提出的回归）：将“模块”添加到 MIME types。查看相关问题

于 2020-01-23T20:52:04.710 回答
1

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

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

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

希望这可以帮助。让我很头疼。

于 2019-06-25T22:15:13.903 回答
1

不是 Cordova 而是 Express 应用程序也有同样的问题。事实证明，当我在 Angular 8 中进行 ng 构建时，它在具有应用程序名称的新目录下创建了文件。因此，当我运行 ng build 时，我得到了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 文件提供服务的公共目录的位置。例如：

app.use(express.static(path.join(__dirname, 'dist/<app-name>')));
于 2020-04-21T19:52:30.670 回答
0

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

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

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

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

在这里找到了解决方案。

于 2020-12-01T13:49:59.727 回答