Ionic4多项目多环境下Cordova传递Angular配置失败问题

我之前处理过几乎一模一样的问题，核心坑在于Ionic对浏览器端和Cordova端的参数传递逻辑不一样：浏览器serve时，Ionic会自动把--configuration转递给Angular，但Cordova构建时，它直接把这个参数传给了Cordova——而Cordova根本不懂Angular的环境配置项，自然就失效了。下面是几个靠谱的解决办法：

方法1：拆分构建步骤，手动控制Angular编译 #

跳过Ionic的中间参数传递，先让Angular按指定环境编译，再让Cordova打包成品：

1. 先执行Angular的环境编译：

   ng build --project=xx --configuration=dev
   

2. 再调用Ionic+Cordova构建安卓应用，加上--no-build告诉它不要重复编译：

   ionic cordova build android --project=xx --no-build
   

这个方法简单直接，适合快速验证环境配置是否正常。

方法2：修改ionic.config.json，强制传递配置参数 #

在ionic.config.json里给目标项目添加Cordova构建命令的自定义配置，让Ionic把--configuration参数转递给Angular：

{
  "projects": {
    "xx": {
      "name": "xx",
      "integrations": {
        "cordova": {}
      },
      "type": "angular",
      "cordova": {
        "buildCommand": "ng run xx:build --configuration={CONFIGURATION}"
      }
    }
  }
}

配置完成后，你就可以用原来的命令正常构建了：

ionic cordova build android --project=xx --configuration=dev

Ionic会自动把--configuration的值替换到{CONFIGURATION}占位符里，调用正确的Angular构建命令。

方法3：在angular.json中新增Cordova专属构建目标 #

你可以在angular.json的项目architect节点下，专门为Cordova构建创建一个目标，把环境配置整合进去：

"architect": {
  // 保留原有其他配置...
  "cordova-build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "www",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json"
    },
    "configurations": {
      "dev": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.xx.dev.ts"
          }
        ]
      },
      "int": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.xx.int.ts"
          }
        ]
      },
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.xx.prod.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
      }
    }
  }
}

之后执行构建时，指定这个专属目标即可：

ionic cordova build android --project=xx -- --builder=cordova-build --configuration=dev

重要细节提醒 #

我注意到你在angular.json里的路径有不一致的地方：dev配置里的环境文件路径是src/environments/（带s），但production和int是src/environment/（不带s），这个路径错误会直接导致文件替换失败，记得先统一修正！

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