Как предварительно загрузить файл конфигурации в angular2

Question

Я помогаю разрабатывать веб-приложение angular2 с использованием веб-пакета, и в настоящее время мы планируем открыть какой-то файл для настройки функциональности нашего приложения (вероятно,.json). В основном это делается для того, чтобы люди, реализующие наше приложение, могли легко найти файл, чтобы указать такие вещи, как: где находится их API, если они хотят добавить собственные таблицы стилей и т. Д.

Сервис, который я использую для загрузки моего конфигурационного файла, выглядит следующим образом:

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

И я использую его в другом классе обслуживания:

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

Мне интересно, есть ли способ загрузить config.ts либо:

1. Перед загрузкой корневого компонента приложения
2. Прежде чем ApiService будет создан
3. Перед вызовом сервисного метода от ApiService

ИЛИ ЖЕ

4. Несколько совершенно другой способ добавить настраиваемость в приложение angular2.

Answer 1

Решение, которое я бы порекомендовал вам и которое подходит для производственных приложений, заключается в загрузке файла конфигурации в webpack.config.js а затем используйте Define Plugin из веб-пакета.

Он просто позволяет прочитать любую переменную файла и среды и затем передать ее в пакет как глобальную переменную.