Ionic中的動態環境變量 - 無法找到模塊

Question

我正試圖找到一個很好的解決方案，以便在運行時基於標誌將環境變量動態注入到Ionic2應用程序中。對於我的用例，我需要支持比默認的dev/prod選項更多的功能。 （例如dev/test/qa/prod）。

我主要是立足我的做法上有一些調整如下：https://github.com/gshigeto/ionic-environment-variables

環境標誌我設置爲APP_ENV，只是離子命令之前，就像這樣：

APP_ENV=dev ionic serve

在編譯時，我使用自定義的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; 
}; 

，我告訴離子約我自定義的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); 
    } 

} 

這很適合用於dev或我指定的任何其他環境，並且控制檯登出適當的URL。

然而，當我運行：

APP_ENV=prod ionic serve --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 

我真的不知道什麼是關於督促比任何其他環境如此不同。我錯過了什麼嗎？

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 
};