Ionic 4 自定义环境文件

Question

我正在使用 Ionic 4 项目。我有不同的环境（test、testB、prob、dev ecc..）。我已经在环境文件夹中创建了所有文件：environment.dev.ts、environment.testA.ts、environment.testB.ts 等。有没有办法在构建或服务时设置正确的环境（在浏览器上）项目（也许像 --env=testA 这样的角度？）？我唯一能找到的是--prod，它只适用于生产环境，但是在这种情况下，我有两个以上的环境。

Answer 1

您应该检查您的 package.json 文件。
我的 package.json 如下所示：

  "name": "name",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e",
   "build-prod": "ng build --prod --progress false",
   "build-dev": "ng build --env=dev --aot=true --output-hashing=all --sourcemaps=false --extract-css=true --named-chunks=false --build-optimizer=true --progress false",
   "build-preprod": "ng build --env=preprod --aot=true --output-hashing=all --sourcemaps=false --extract-css=true --named-chunks=false --build-optimizer=true --progress false",
   "build-dev2": "ng build --env=dev2 --aot=true --output-hashing=all --sourcemaps=false --extract-css=true --named-chunks=false --build-optimizer=true --progress false"
},

在 angular-cli.json 中有一个环境键：

"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "preprod": "environments/environment.preprod.ts",
    "dev2": "environments/environment.dev2.ts"
  },

在 Angular 8 中，您应该检查 angular.json：

"configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }, "preprod": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.preprod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },

Answer 2

经过一番测试，我解决了！ Ionic 4 的解决方案：

1. 使用文件夹 src/environments 中的环境变量创建您需要的所有文件。示例 environment.live.ts、environment.test1.ts、environment.test2.ts 等

2. 更新根文件夹中的angular.js文件；

     "configurations": {
          "production": { ... } // already there for production
          // Add for your custon environments files here
          "testA": {
             "fileReplacements": [
               {
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.testa.ts" //Name of your file
               }
             ]
          } ... // Do this for every environment on every build you need
     }
   

3. 在您需要的项目中导入环境文件：

   从'../../environments/environment'导入{环境}；

4. 在构建或服务时选择不同的环境：ionic serve -- -c=testA 构建等的相同逻辑...这将自动将环境文件替换为正确的文件，在这种情况下，文件与 testA 环境相关。