Angular – multiple environments

Dzisiaj krótki wpis, jak rozbudować liczbę środowisk w naszej aplikacji.

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:

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:

I pozostaje nam się cieszyć, że możemy już wykonywać builda z odpowiednimi flagami:

…a framework Angular, skorzysta ze wskazanej implementacji.

One Comment

  1. Bartek

    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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *