AngularJS 2: Obsługa konfiguracji aplikacji dla różnych środowisk

Question

Poniższy scenariusz: Buduję aplikację AngularJS 2, która pobiera interfejs REST API (który można zbudować za pomocą Elixir, RoR lub cokolwiek innego). W trakcie rozwoju chcę, aby AngularJS zużywał inne API niż w produkcji (może z danymi testowymi, może dlatego, że buduję API w tym samym czasie i działa na moim komputerze).

Dodatkowo inni członkowie mojego zespołu mogą chcieć użyć innego lokalnego adresu API. Oznacza to, że nie powinno to wchodzić w system kontroli wersji.

Na przykład api_base_url może być http://localhost:4000 dla mnie, http://testapi.local dla mojego kolegi i http://api.example.com do produkcji.

Wartość api_base_url powinna być dostępna w wielu komponentach.

Jakie jest dobre podejście do radzenia sobie z tym?

Answer 1

Można zdefiniować dedykowanego dostawcę, pod warunkiem że te wskazówki. Coś w tym stylu:

bootstrap(AppComponent, [ 
    (...) 
    provide('configuration', { 
    useValue: { 
     apiBaseUrl: 'http://localhost:4000' 
    } 
    } 
]); 

Podczas pakowania kodu do produkcji można zastąpić plik zawierający ten kod plikiem z konfiguracją do produkcji.

Aby uwzględnić tę konfigurację, można rozszerzyć klasę RequestOptions poprzedzający wszystkie żądania z apiBaseUrl prefix:

import { 
    BaseRequestOptions, RequestOptions, RequestOptionsArgs 
} from 'angular2/http'; 

export class AppRequestOptions extends BaseRequestOptions { 
    constructor(private @Inject('configuration') configuration:any) { 
    } 

    merge(options?:RequestOptionsArgs):RequestOptions { 
    options.url = this.configuration.apiBaseUrl + options.url; 
    return super.merge(options); 
    } 
} 

nie zapomnij, aby skonfigurować opcje żądanie podczas uruchamiania się aplikacji:

bootstrap(AppComponent, [ 
    (...) 
    provide('configuration', { 
    useValue: { 
     apiBaseUrl: 'http://localhost:4000' 
    } 
    } 
    provide(RequestOptions, { useClass: AppRequestOptions }) 
]); 

To przetwarzanie może być zawarte w dedykowanym pliku JS, który zostanie zastąpiony w kompilacji (na przykład z gulp i gulp-html-replace).

Zobacz na to pytanie:

• How do I actually deploy an Angular 2 + Typescript + systemjs app?

dla ostatniego kroku, można również ładować asynchronicznie aplikacji na podstawie pliku konfiguracyjnego:

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]); 
var http = injector.get(Http); 

http.get('config.json').map(res => res.json()) 
    .subscribe(data => { 
    bootstrap(AppComponent, [ 
     HTTP_PROVIDERS 
     provide('config', { useValue: data }) 
    ]); 
    }); 

zobaczyć to pytanie więcej szczegółów:

• How to bootstrap an Angular 2 application asynchronously

Answer 2

Może powinieneś spróbować Grunt. Przykład: http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/