Ionic V4 - Build Prod “找不到 cordova.js 脚本标签。插件加载可能失败。”

Posted 2023-03-16

【中文标题】Ionic V4 - Build Prod “找不到 cordova.js 脚本标签。插件加载可能失败。”

【英文标题】：Ionic V4 - Build Prod "Could not find cordova.js script tag. Plugin loading may fail."

【发布时间】：2019-08-28 16:40:02

【问题描述】：

在 Ionic v4 中，当我在生产模式下运行捆绑的应用程序 (ionic cordova build android --prod) 时，控制台显示“找不到 cordova.js 脚本标签。插件加载可能会失败。并且应用程序的某些内容（例如字体）已卸载（我看到的是 Roboto Font 而不是我的自定义字体）。否则，当我尝试在没有生产模式的情况下进行编译**（ionic cordova build android）**时，应用程序运行时没有控制台错误。

我的离子信息：

离子（离子 CLI）：4.12.0 离子框架：@ionic/angular 4.2.0 @angular-devkit/build-angular：0.13.8 @angular-devkit/原理图：7.2.4 @角/cli：7.3.8 @ionic/angular-toolkit：1.4.1

科尔多瓦：

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova 平台：安卓 7.1.4 Cordova 插件：cordova-plugin-ionic-keyboard 2.1.3、cordova-plugin-ionic-webview 3.1.2（和其他 7 个插件）

有人也面临这个问题吗？

干杯，

【问题讨论】：

你找到解决办法了吗？

对我来说同样的问题。考虑更改 index.html 以引用 cordova.js，而不是散列 cordova.sjhdfksjdhfks.js

@KirillGroshkov 你是怎么做到的？我无法修改 apk 中的 index.html。

【参考方案1】：

在开发环境中，地址是cordova.js，文件被找到。 在 prod 中，文件名被散列成类似 cordova.4bdae3fd4f9978d7dcd8.js 的东西。

因此需要将函数findCordovaPath()修改为

function findCordovaPath () 
  var path = null;
  var scripts = document.getElementsByTagName('script');
  var startterm = '/cordova.';
  var term = '/cordova.js';
  for (var n = scripts.length - 1; n > -1; n--) 
    var src = scripts[n].src.replace(/\?.*$/, ''); // Strip any query param CB-6007).
    var idx = src.indexOf(startterm);
    if (idx >= 0)
      term = src.substring(idx+1);
    
    if (src.indexOf(term) === (src.length - term.length)) 
      path = src.substring(0, src.length - term.length) + '/';
      break;
    
  
  return path;

【讨论】：

能否请您提供有关如何使用此功能的信息？

@Zahema：我已经在 www/cordova.js 的 Ionic 应用程序中替换了这个功能。应用程序内还有其他的cordova.js 文件，有些是自动生成的。根据您创建的不同平台，您可能需要在多个地方更改此功能。

您的解决方案给了我错误：ERROR in cordova.8d2879086e40979e9c2d.js from Terser Invalid regular expression: /?.*$/: Nothing to repeat [cordova.8d2879086e40979e9c2d.js:1932,37] [ERROR] An error occurred while running subprocess ng.

@Kari 例外的正则表达式似乎是var src = scripts[n].src.replace(/\?.*$/, '');。为什么你的不一样？ （操作系统不同？）

@Marco 我刚刚再次检查，是的，它实际上应该在问号之前包含反斜杠，确保它被转义。会相应地更改我的帖子。

【参考方案2】：

当我从 ionic 3 迁移到 ionic 4 时，我遇到了同样的问题。在我开始一个全新的项目（默认选项卡）并复制代码后，它就消失了。

似乎有人找到了解决方案：

我不再有这个问题了。在 angular.json 中，我设置了 buildOptimizer 并将 AoT 设置为 false，然后我就可以使用 --prod 进行构建。当我 重新激活 AoT，我在日志中看到了问题。依赖关系 在迁移过程中注入的方式错误。 来源：Github

【参考方案3】：

通过设置"optimization": false和"outputHashing": "none"临时修复angular.json配置：

"configurations": 
        "production": 
          ...
          "optimization": false,
          "outputHashing": "none",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          ...
        ,
        ...
      

【讨论】：

上述解决方法有效，但由于优化设置为 false 输出 apk 大小会更高（即未经优化的 apk 的实际大小）。

这将禁用构建输出的优化。包括脚本和样式的缩小、tree-shaking、死代码消除、关键 CSS 的内联和字体内联。