ionic-framework - Ionic 中的动态环境变量 - 找不到模块

Question

我正在尝试找到一个很好的解决方案，用于在运行时根据标志动态地将环境变量注入(inject)到 Ionic2 应用程序中。对于我的用例，我需要支持的不仅仅是默认的开发/产品选项。 (例如 dev/test/qa/prod)。

我的方法主要基于以下内容并进行了一些调整:https://github.com/gshigeto/ionic-environment-variables

我设置的环境标志是 APP_ENV，就在 ionic 命令之前，如下所示:

APP_ENV=dev ionic 服务

在构建时，我使用自定义 webpack.config 文件将 env.ts 文件替换为目标环境的 .ts 文件。看起来像这样:

./config/Webpack.config

var path = require('path');
var defaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

var env = process.env.APP_ENV;

if (!defaultConfig[env]) {  
    defaultConfig[env] = defaultConfig["dev"];
}

defaultConfig[env].resolve.alias = {
    "@app/env": path.resolve('./src/env/env.' + env + '.ts')
};

module.exports = function () {
  return defaultConfig;
};

我在这里告诉 ionic 我的自定义 webpack 配置:

./package.json

  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },

此外，我更新了 tsconfig.json，让编译器知道如何解析别名:

./tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@app/env": [
        "env/env"
      ]
    }
  },
  ...
}

然后我像这样定义环境变量文件:

./src/env/env.dev.ts

export const ENV = {
    API_URL: "http://dev-url.com/"
}

./src/env/env.test.ts

export const ENV = {
    API_URL: "http://test-url.com/"
}

./src/env/env.prod.ts

export const ENV = {
    API_URL: "http://prod-url.com/"
}

然后我在要使用该文件的位置引入导入:

./src/app/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ENV } from '@app/env';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    console.log(ENV.API_URL);
  }

}

这对于开发或我指定的任何其他环境非常有用，并且控制台会注销相应的 URL。

但是，当我运行时:

APP_ENV=prod ionicserve --prod,

我得到以下信息:

Error: Cannot find module "@app/env"
    at Object.192 (http://localhost:8100/build/main.js:44:7)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.261 (http://localhost:8100/build/main.js:157:75)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.212 (http://localhost:8100/build/main.js:99:73)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.193 (http://localhost:8100/build/main.js:81:70)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
    at http://localhost:8100/build/main.js:1:1

我真的不确定 prod 与其他环境有什么不同。我错过了什么吗？

Answer 1

如果您查看 @ionic/app-scripts/config/webpack.config.js，您会发现 app-scripts v3 的格式可能已更改。

此 v3 格式最后需要以下内容:

module.exports = {
  dev: devConfig,
  prod: prodConfig
};

如果此格式存在问题，也许您可​​以尝试以下操作:

var path = require('path');
var defaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

var env = process.env.APP_ENV ? process.env.APP_ENV : 'dev';

var devWebPackConfig = defaultConfig.dev;
devWebPackConfig.resolve.alias = {
  "@app/env": path.resolve('./src/env/env.' + env + '.ts')
};

var prodWebPackConfig = defaultConfig.prod;
prodWebPackConfig.resolve.alias = {
  "@app/env": path.resolve('./src/env/env.' + env + '.ts')
};

module.exports = {
  dev: devWebPackConfig,
  prod: prodWebPackConfig
};