Webpackが提供するAngular 2 Appの環境ベースのプロパティは？

Question

私は、JHipsterによって生成されたスタンドアロンの角型コンソールで作業しており、Springブートサーバーを使用しています。私は、環境（ローカル、開発、プロードなど）に基づいてさまざまなプロパティでアプリケーションを提供するために探しています。

I see a lot of posts about configuring the webpack build per-environmentがありますが、アプリケーションをデベロッパーまたはプロダクションで実行しているかどうかにかかわらず、URLおよびその他のデータをAngular 2 4.xアプリの直接データに指定する必要があります。 webpack経由でAngularを起動すると、このタイプの環境設定が可能ですか？

Answer 1

dotenv-webpackプラグインをお勧めします。

webpack.config.js

const  Dotenv  =  require('dotenv-webpack'); 
... 
plugins: [ 
    new  Dotenv({ 
     path:  './.env' 
    }) 
] 

.env

URL=http://example.com 
ENV=PROD 
... 

これは、あなたが環境変数にアクセスするためにprocess.envを使用することができます：

constructor(private http:HttpClient) { 
    http.get(`${process.env.URL}`).subscribe(t=> { 
     ... 
    }); 
} 

ビルド時に環境変数が置換されます。

Answer 2

私はDotEnvプラグインのインストールを終了しませんでしたが、Webpackページに記載されているDefinePluginソリューションを実装しました。私がnoobですので、私はドキュメントが混乱していることが分かりました。リストされた例は、 'process.env'変数（これは新しい概念です）を使用していないため動作しませんでした。

は、ここで私はこのシステムをセットアップするために使用される粗いステップバイステップガイドです：

1. はWebPACKのを作成します。 envName .jsファイルをサポートする必要があります。
2. ビルドセットアップの他に、カスタムプロパティを使用する各ファイルにDefinePluginというエントリを作成します。私の最初のテストでは、webpack.commonで「グローバル」定数を作成すると他の環境が上書きされてしまい、そこでパラメータを設定することは避けました。
3. "process.env"キーの下にDefinePlugin定数を作成します。これは、jsベースのシステムが特定のプロセスのデータを格納するために使用する特別なキーです。
4. あなたの糸、ノード、mvnなどのビルドを変更して、ローカルの開発環境を利用してください。私の状況では、開発環境はクラウドにあるため、ローカライズされたテスト用にデフォルトのlocal環境を作成しました。
   5. 定義済みの定数は、それぞれの環境で、必要なインポートタイプステートメントなしでアクセスできるようになりました。

次に、スニペットの例を示します。私のwebpack.local。pluginsエントリの下のjsファイル：

... 
new webpack.DefinePlugin({ 
'process.env': { 
    NAME: JSON.stringify('local'), 
    API_URL: JSON.stringify('http://localhost:8000/'), 
} 
}) 
... 

のは、私は私のfakeService typescriptですクラスでこれらの値にアクセスしたいとしましょう：

~/src/main/webapp/fake-service.ts 
@Injectable 
export class FakeService { 
    private URL_ROOT = process.env.API_URL + 'api/v2/externalService/resource/'; 
    constructor(private http: HTTP) {} 
    get(): Observable<any> { 
     if(process.env.NAME == 'local') { 
      console.log("Calling url at " + this.URL_ROOT); 
     } 
     return this.http.get(this.URL_ROOT).map((res: Response) => res.json()); 
    } 
} 

あり、これを行うには良い方法はおそらくある（またはになります未来）。アプリケーションにこのprocess.env依存関係を構築するのではなく、これらの値をロードし、このデータを利用する必要があるサービスまたはコンポーネントに注入できるサービスを作成することが賢明でしょう（Configuration）。