AngularJS 2: Umgang mit der App-Konfiguration für verschiedene Umgebungen

Question

Das folgende Szenario: Ich baue eine AngularJS 2-App, die eine REST-API verwendet (die mit Elixir oder RoR oder was auch immer gebaut werden könnte). Während der Entwicklung möchte ich, dass AngularJS eine andere API verwendet als in der Produktion (vielleicht mit Testdaten, vielleicht weil ich die API zur gleichen Zeit erstelle und sie auf meinem Rechner läuft).

Zusätzlich möchten andere Mitglieder meines Teams möglicherweise eine andere lokale API-Adresse verwenden. Das heißt, das sollte nicht in das Versionskontrollsystem gehen.

So könnte zum Beispiel die api_base_urlhttp://localhost:4000 für mich sein, http://testapi.local für meinen Kollegen und http://api.example.com für die Produktion.

Der Wert api_base_url sollte in mehreren Komponenten verfügbar sein.

Was ist ein guter Ansatz, um damit umzugehen?

Answer 1

Sie könnten einen dedizierten Anbieter definieren, der diese Hinweise bereitstellt. So etwas ähnliches:

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

Wenn Sie Ihren Code für die Produktion verpacken, können Sie die Datei mit diesem Code mit dem man mit der Konfiguration für die Produktion ersetzen.

Zur Berücksichtigung dieser Konfiguration können Sie die RequestOptions Klasse erweitern alle Ihre Anfrage mit dem apiBaseUrl Präfix voranstellen:

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

Vergessen Sie nicht, die Anfrage Optionen zu konfigurieren, wenn die Anwendung Bootstrapping:

Diese Verarbeitung könnte in einer dedizierten JS-Datei enthalten sein, die innerhalb des Builds ersetzt würde (z. B. mit gulp und gulp-html-replace).

Sehen Sie diese Frage:

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

Für den letzten Schritt, auch basierend auf einer Konfigurationsdatei asynchron die Anwendung geladen werden konnte:

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

Sehen Sie diese Frage für Weitere Details:

• How to bootstrap an Angular 2 application asynchronously

Answer 2

Vielleicht sollten Sie Grunt versuchen. Beispiel: http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/