Come config ambiente di sviluppo diverso angolare 2 app

Question

Ho un file costante

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

E ho importato al mio servizio

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

Come posso cambiare l'endpont con il cambiamento del server. Ho server di staging server di sviluppo e server locale. Voglio app per rilevare il cambiamento dell'ambiente.

Nella mia app angolare 1 ho utilizzato envserviceprovider per questo. Posso usare la stessa app angular 2?

Answer 1

ho risolto il problema con l'aggiunta di un metodo di classe

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

Nel mio servizio

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

Answer 2

Risposta breve: usare Angular CLI. It è in fase beta ma lo funziona molto bene ed è consigliato dal team Angular per l'avvio di nuovi progetti. Con questo strumento puoi configurare diversi ambienti. Al momento della compilazione, lo src/client/app/environment.ts verrà sostituito da config/environment.dev.ts o config/environment.prod.ts, a seconda dell'ambiente corrente della CLI.

default Ambiente a dev, ma è possibile generare una produzione a costruire tramite la bandiera -prod sia ng build -prod o ng serve -prod. Dato che questa è una nuova funzionalità, può essere un po 'confusa, quindi guarda this great guide per ulteriori informazioni su come configurare gli ambienti angolari usando la CLI.

Spero che questo aiuti.

Answer 3

Vorrei solo aggiungere un po 'di luce nella risposta fornita da @Cartucho. Ha ragione sui passaggi necessari per configurare un ambiente personalizzato per le tue angolari 2 app. Mi piacerebbe anche secondo l'opinione che l'articolo a Guide to Build the app in different environments

Ma l'articolo dato perde un passo importante. I passaggi per configurare un ambiente personalizzato sono i seguenti: 1) Creare un nuovo file chiamato environment.YourEnvName.ts nella cartella degli ambienti nel progetto. 2) Aggiungere la descrizione Ambiente nell'oggetto "ambienti" nel file angular-cli.json angular-cli.json.

"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) Una volta apportate queste modifiche, è possibile creare l'app per il nuovo ambiente utilizzando il seguente comando.

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName 

Spero che questo post sia utile per qualsiasi nuovo sviluppatore di Angular 2.

Answer 4

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

Answer 5

spero che aiuta.

Innanzitutto, creare development.ts, staging.ts, file di configurazione production.ts. Secondo, nel tuo indice.pug, importare il file di ambiente nel modo seguente:

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

ricordare che in nodeJS/Pug/Jade settings.env contiene il valore NODE_ENV.

E, infine, la vostra mappa system.config.ts dovrebbe avere le seguenti righe:

"development": "myUrl/configs/development.js", 
    "staging": "myUrl/configs/staging.js", 
    "production": "myUrl/configs/production.js",