Dzisiaj krótki wpis, jak rozbudować liczbę środowisk –multiple environments w naszej aplikacji.
Multiple environments
Tworząc projekt za pomocą narzędzia Angular CLI, zapewne zwróciłeś uwagę, że tworzy się katalog environments w katalogu src:
I pewno nie jest dla Ciebie niczym nowym, że plik environment.prod.ts wskazuje na środowisko produkcyjne aplikacji, a plik environment.ts na środowisko domyślne.
W pliku environment.ts widzimy komentarz, że jak wywołamy ng build z odpowiednią flagą (–env=prod), to zostanie użyty plik environment.prod.ts:
|
1 |
`ng build --env=prod` then `environment.prod.ts` will be used instead. |
A co jeśli mamy więcej środowisk w naszej aplikacji? Powiedzmy pięć? Wystarczy, że stworzysz kolejne pliki:
A następnie w pliku .angular-cli.json, dodasz je jako kolejne propercje obiektu environments:
Teraz wrzucamy do plików ze środowiskami, to co chcemy zmieniać w zależności od środowiska (np. API), a następnie sięgamy po nasz domyślny environment np. w którymś z naszych serwisów:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { environment } from '../environments/environment'; @Injectable() export class CarsService { constructor(private http: Http) {} getCars(): Observable<Car[]> { return this.http.get(environment.apiUrls.getCars) .map((res) => res.json()); } } |
I pozostaje nam się cieszyć, że możemy już wykonywać builda z odpowiednimi flagami:
|
1 2 3 4 |
"ng build --env=prod" "ng build --env=qa" "ng build --env=sp" "ng build --env=staging" |
…a framework Angular, skorzysta ze wskazanej implementacji w ten sposób otrzymujemy multiple environments w naszym projekcie.
Podobny przykład implementacjimultiple environments znajdziecie tutaj.
Czytając ten artykuł nasunęło mi się pytanie: gdzie według Ciebie powinniśmy w projekcie konfigurować zmienne (np. adresy api na które wysylamy requesty) – zakładajac że nie chcemy hardcodowac tego w kodzie lub plikach environtment + fajnie by było nie przebudowywać aplikacji kiedy chcemy zmienić konfigurację. Jedyne co przychodzi mi na myśl to dodanie do zasobów statycznych pliku z taką konfiguracją. Pytanie czy to jest bezpieczne rozwiązanie.
Mnie też to ciekawi, sugestie?
np: tworzymy plik: data.ts….
import { environment } from ’../environments/environment’;
export let baseUrl = (
environment.envName === 'prod’ ? 'https://prodUrl…’ :
(environment.envName === 'uat’ ? 'https://uatUrl…’ :
(environment.envName === 'dev’ ? 'https://devUrl :
'http://localhost:8080′)
)
);
example of environment.prod.ts…
export const environment = {
production: true,
envName: 'prod’
};
usage in class:
import {baseUrl} from „../path to data file”;
public Url: string = baseUrl ;