web-dev-qa-db-ja.com

Angular 2アプリで異なる開発環境を構成する方法

定数ファイルがあります

export class constants {
    public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; }
}

そして、それをサービスにインポートしました

private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';

サーバーの変更でエンドポイントを変更するにはどうすればよいですか？開発サーバーのステージングサーバーとローカルサーバーがあります。アプリに環境の変化を検出させたい。

angular 1アプリでは、このためにenvserviceproviderを使用しました。 angular 2アプリで同じものを使用できますか？

angularangular2-services
47
Minna zacharias

クラスメソッドを追加することで問題を解決しました

export class config {

    public static getEnvironmentVariable(value) {
        var environment:string;
        var data = {};
        environment = window.location.hostname;
        switch (environment) {
            case'localhost':
                data = {
                    endPoint: 'https://dev.xxxxx.com/'
                };
                break;
             case 'uat.server.com':
                data = {
                    endPoint: 'https://uat.xxxxx.com/'
                };
                break;

            default:
                data = {
                    endPoint: 'https://dev.xxxx.com/'
                };
        }
        return data[value];
    }
}

私のサービスで

private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;
0
Minna zacharias

短い答え： Angular CLI を使用します。それ ベータ段階ですが、 非常にうまく機能し、Angularチームが新しいプロジェクトを開始するために推奨しています。このツールを使用すると、さまざまな環境を構成できます。ビルド時に、src/client/app/environment.tsは、現在のCLI環境に応じて、config/environment.dev.tsまたはconfig/environment.prod.tsに置き換えられます。

環境のデフォルトはdevですが、-prodまたはng build -prodのいずれかのng serve -prodフラグを使用して、実動ビルドを生成できます。これは新しい機能であるため、少し混乱する可能性があるため、CLIを使用してAngular環境をセットアップする方法の詳細については、 この素晴らしいガイド を参照してください。

お役に立てれば。

70
Cartucho

@Cartuchoが提供する答えにさらに光を加えたいと思います。彼は、あなたのangular 2アプリ用にパーソナライズされた環境をセットアップするために必要な手順について正しいです。 異なる環境でアプリを構築するためのガイド

しかし、与えられた記事は重要なステップを見逃しています。パーソナライズされた環境を設定する手順は次のとおりです。1）プロジェクトの環境フォルダーにenvironment.YourEnvName.tsという新しいファイルを作成します。 2）angular-cli.jsonファイルの「environments」オブジェクトに環境の説明を追加します。

"environments": {
    "source": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "dev": "environments/environment.dev.ts", 
    "qa": "environments/environment.qa.ts",
    "YourEnvName": "environments/environment.YourEnvName.ts"
  }

3）これらの変更を行ったら、次のコマンドを使用して新しい環境用のアプリをビルドできます。

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName

この投稿が新しいAngular 2開発者に役立つことを願っています。

30
Saurabh Shetty
export class endPointconfig {

    public static getEnvironmentVariable() {
        let Origin = location.Origin;
        let path = location.href.split('/')[3];
        let value = Origin +'/'+ path + '/api/';`enter code here`       
        return value;
    }
}
0
Mahesh Kumar Alanka

役に立てば幸いです。

最初に、development.ts、staging.ts、production.ts構成ファイルを作成します。次に、index.pugで、次の方法で環境ファイルをインポートします。

   SystemJS.import("#{settings.env}").then(function(env) {
       System.import("app").catch(console.error.bind(console));
   } // Promise.all also works!

NodeJS/Pug/Jadeのsettings.envにはNODE_ENV値が含まれていることに注意してください。

最後に、system.config.tsマップには次の行が必要です。

    "development": "myUrl/configs/development.js",
    "staging": "myUrl/configs/staging.js",
    "production": "myUrl/configs/production.js",
0
Leonardo Venoso