Jak config innego środowiska programistycznego aplikacji kątowej 2

Question

mam stałą plikowi

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

I przywożone do mojego serwisu

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

Jak mogę zmienić endpont ze zmianą serwera. Mam serwer pomostowy serwera rozwoju i serwer lokalny. Chcę, aby aplikacja wykryła zmianę środowiska.

W mojej aplikacji kątowej 1 użyłem envserviceprovider do tego. Czy mogę użyć tego samego w kanciastej aplikacji 2?

Answer 1

Mam rozwiązać ten problem przez dodanie metody klasy

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

W mojej służbie

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

Answer 2

Krótka odpowiedź: użyć Angular CLI. To jest w fazie beta, ale działa naprawdę dobrze i jest zalecane przez zespół Angular Team do rozpoczynania nowych projektów. Za pomocą tego narzędzia możesz konfigurować różne środowiska. W czasie kompilacji, src/client/app/environment.ts zostanie zastąpiony przez config/environment.dev.ts lub config/environment.prod.ts, w zależności od bieżącego środowiska CLI.

domyślne środowisko do dev, ale można wygenerować produkcja budować poprzez flagi -prod w obu ng build -prod lub ng serve -prod. Biorąc pod uwagę, że jest to nowa funkcja, może to być trochę mylące, więc spójrz na this great guide, aby uzyskać dodatkowe informacje na temat konfigurowania Angular Environments przy użyciu interfejsu CLI.

Mam nadzieję, że to pomoże.

Answer 3

Chciałbym tylko dodać trochę światła do odpowiedzi udzielonej przez @Cartucho. Ma rację co do kroków wymaganych do skonfigurowania spersonalizowanego środowiska dla twoich aplikacji kątowych 2. Chciałbym także wyrazić opinię, że artykuł pod numerem Guide to Build the app in different environments

Ale dany artykuł pomija ważny krok. Kroki w celu skonfigurowania spersonalizowanego środowiska są następujące: 1) Utwórz nowy plik o nazwie environment.YourEnvName.ts w folderze environment w projekcie. 2) Dodaj opis Środowisko w obiekcie "environments" w pliku o układzie kątowym-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) Po dokonaniu tych zmian można zbudować aplikację dla nowego środowiska, stosując następujące polecenie.

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName 

Mam nadzieję, że ten post jest pomocny dla każdego nowego programisty 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

Mam nadzieję, że to pomaga.

Najpierw utwórz pliki developers.ts, staging.ts, production.ts. Po drugie, w indeksie.mops, zaimportować plik środowisko, w następujący sposób:

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

Pamiętaj, że w nodeJS/Mops/Jade settings.env zawiera wartość NODE_ENV.

I wreszcie, twoja mapa system.config.ts powinien posiadać następujące linie:

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