Angular – multiple environments

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:

`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:

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:

"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.