Angular5转Cordova项目：编译正常但安卓/iOS模拟器内运行失败

这种跨平台调试的坑我之前也踩过不少，结合你说的浏览器模拟器正常、移动端编译通过但运行炸的情况，大概率是Angular打包路径或者Cordova的原生环境适配出了问题，给你几个针对性的排查和解决方向：

Angular默认的base href是/，但Cordova的Web资源是放在file:///android_asset/www/（安卓）或iOS的本地文件路径下，绝对路径会直接导致资源加载失败：

• 打包时手动指定相对路径：ng build --prod --base-href ./
• 或者在angular.json里永久修改配置，避免每次打包重复输入参数：

  "projects": {
    "your-angular-project": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "./",
            // 其他配置...
          }
        }
      }
    }
  }
  

安卓报错直接指向vendor.xxxx.bundle.js，核心问题要么是文件没同步到位，要么是WebView不兼容：

• 先去Cordova项目的platforms/android/app/src/main/assets/www/目录，核对vendor.xxxx.bundle.js是否存在、文件大小和Angular打包产物是否一致。如果缺失或大小异常，重新执行ng build后手动复制到www目录，或者用钩子自动同步（后面会说）。
• 用Chrome DevTools远程调试安卓模拟器：打开Chrome输入chrome://inspect/#devices，连接模拟器后查看Console的详细错误——比如是不是404路径错误，或者ES6+语法未转译导致的执行报错。

iOS的这个提示一般是伴随资源加载失败的警告，核心还是WebView的配置和兼容性：

• 升级Cordova iOS平台到最新稳定版：cordova platform update ios，老版本的WebView对Angular打包的现代JS语法支持很差。
• 在config.xml里配置正确的内容安全策略（CSP），允许加载本地资源：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  

• 确认config.xml里开启了本地文件导航权限：<allow-navigation href="file://*" />，iOS 14+对本地资源加载的限制更严格。

安卓和iOS的WebView版本参差不齐，尤其是老设备，Angular默认的Prod打包可能用了高版本JS语法，导致运行报错：

• 在tsconfig.json里把编译目标改成ES5：

  "compilerOptions": {
    "target": "es5",
    // 其他配置...
  }
  

• 重新打包后同步到Cordova的www目录，再尝试编译运行。

手动复制文件容易遗漏或出错，建议加个钩子在prepare阶段自动同步Angular的dist目录到Cordova的www：

• 在Cordova项目根目录创建hooks/after_prepare/01_copy_dist.js，内容如下：

  const fs = require('fs-extra');
  const path = require('path');
  
  module.exports = function(context) {
    const srcDir = path.join(context.opts.projectRoot, 'dist/your-angular-project');
    const destDir = path.join(context.opts.projectRoot, 'www');
    fs.copySync(srcDir, destDir);
    console.log('✅ 已自动同步Angular打包产物到Cordova www目录');
  };
  

• 给钩子文件加执行权限：chmod +x hooks/after_prepare/01_copy_dist.js

我之前遇到过几乎一模一样的问题，就是因为没改base href，导致安卓WebView找不到vendor bundle，改完之后就正常运行了。按照上面的步骤一步步排查，应该能快速定位到问题。

内容的提问来源于stack exchange，提问作者Mave