typescript - Hur man förladdar en konfigurationsfil i angular2

Jag hjälper till att utveckla en Angular2-webbapp med hjälp av webpack, och vår nuvarande plan är att öppna någon typ av fil för att konfigurera funktionaliteten i vår applikation (förmodligen .json). Detta skulle främst vara för att ge de som implementerar vår app en lättillgänglig fil för att specificera saker som: var deras API är placerat, om de vill lägga till egna stilmallar, etc.

Tjänsten jag använder för att ladda min konfigurationsfil ser ut så här:

//config.ts
@Injectable()
export class Config {
    private static _config: Object;
    private static _promise: Promise<any>;

    constructor(private http: Http) {
        Config._promise = this.load();
    }

    load() {
        return new Promise((resolve, reject) => {
            this.http.get(`./config/development.json`)
                .map((response: Response) => response.json())
                .catch((error: any) => {
                    console.error(error);
                    return Observable.throw(error.json().error || 'Server error');
                })
                .subscribe((data) => {
                    Config._config = data;
                    resolve(true);
                });
        });
    }

    get(key: any) {
        return  Config._config[key];
    }
}

Och jag använder det i en annan tjänsteklass:

//api.service.ts
@Injectable()
export class ApiService {
    private URI: string;

    constructor(private http: Http, private _config: Config) {
        this.URI = this._config.get('apiUrl');
    }

    getCustomQueries(): Observable<any> {
        return this.http
            .get(`${this.URI}/CustomQuery`)
            .map((response: Response) => {
                let data = response.json();
                return { QueryID: data.id, QueryName: data.name };
            })
            .catch(this.handleError);
    }
}

Jag undrar om det finns ett sätt att ladda config.ts på något av följande sätt:

  1. Innan du startar applikationens rotkomponent
  2. Innan ApiService instansieras
  3. Innan en servicemetod från ApiService kallas

ELLER

  1. Något helt annat sätt att lägga till konfigurerbarhet i en Angular2-applikation.

Svar #1

Lösningen jag skulle råda dig, som är tillräckligt bra för produktionsappar, är att ladda konfigurationsfilen i webpack.config.js och sedan använda Define Plugin från webpack.

Det tillåter dig helt enkelt att läsa vilken fil och miljövariabel som helst och sedan skicka den till paketet som global variabel.

Relaterade artiklar