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ファイルに置き換えます。

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

./config/Webpack.configを、私はここに私のカスタムのWebPACK構成に関するイオン言っている：それはこのようになります

./package.json

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

また、tsconfig.jsonを更新してコンパイラに解決方法を知らせるようにしました別名VEの：

./src/env/env.dev.ts

：私はそのようにのように環境変数ファイルを定義

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

./tsconfig.json

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/アプリ/ページ/ 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 

私は本当に、他の環境よりも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 
};