Question

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

无法加载模块脚本：服务器以非JavaScript MIME类型“”响应。严格的MIME类型检查用于根据HTML规范的模块脚本。

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

来解决了这个问题

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

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

angular.json文件中是否可以解决某些问题，还是我在这里遗漏了一些东西？

Answer 1

我有同样的问题。

创建了一个新项目。

构建生产版本

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

已部署到NGINX
Chrome元素检查器中的标签之间没有内容的白页

修复

更新tsconfig.json

        "target": "es5",

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

此解决方案对我有用，现在我已部署的应用程序中包含内容。

希望对别人有帮助

Answer 2

必须将文件“ tsconfig.json”中的属性“ target”更改为“ es5”。阅读此博客条目“默认情况下的差异加载”：

https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

此属性根据浏览器功能在现代JavaScript或旧版JavaScript之间进行选择：

<script type="module" src="…"> //现代JS

<script nomodule src="…"> //旧版JS

Answer 3

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

我在这里按照步骤操作：

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

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

无法加载模块脚本：服务器回应为非JavaScript MIME类型为“”。严格的MIME类型检查符合HTML规范的模块脚本。

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

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

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

并将其更改为包括mime类型：

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

然后它才在电子窗口内工作。但是，如果我使用“ ng serve”运行项目，并查看由angular提供的网页，那么它就可以正常工作。

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

Answer 4

从未使用过Cordova，但是在Nginx上遇到了相同的问题。我实现的解决方案（没有接受的解决方案提出的回归标准）：将“模块”添加到MIME类型。参见related question

Answer 5

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

考虑到Electron中最新的Chromium实例为72，我在文件中添加了Chrome >= 70 and Chrome <= 72。似乎可以解决这个问题。

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

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

Answer 6

与Cordova无关，但与Express应用程序有相同的问题。原来，当我在angular 8中进行ng构建时，它使用应用程序名称在新目录下创建了文件。因此，当我进行构建时，我得到了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 7

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

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

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

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

找到了解决方案here。

Answer 8

这真的发生在我今天。

过去几周我一直在不停地构建，直到我安装了 Flutter 和必要的依赖项。

编辑：此后的每个 ng 构建现在都会生成不同的 main-es5xxx.js 和 main-es2015xxx.js 文件。

我的同事 ng 从同一分支构建，并创建了正确的 main-es5xxx.js 和 main-es2015xxx.js 文件，并且站点显示正确。

有谁知道 main-es5xxx.js 和 main-es2015xxx.js 文件的创建有什么影响？

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

8 个答案: