Angular2 wait till JSON file loaded
<p>Currently I'm loading a JSON file as follows:</p>

<p><em>translation.service.ts</em></p>

<pre><code>@Injectable()
export class TranslationService {

    private _messages = [];

    constructor(private _http: Http) {
        var observable = this._http.get("/app/i18n/localizable.it.strings").map((res: Response) =&gt; res.json());
        observable.subscribe(res =&gt; {
            this._messages = res;
        });
    }

    getTranslationByKey(key: string, args?: any[]) {
        return this._messages[key];
    }
}
</code></pre>

<p><em>localizable.it.strings</em></p>

<pre><code>{
    "home.nav.calendar": "Calendar",
    ...
}
</code></pre>

<p>My <code>TranslationService</code> gets injected in my <code>HomeComponent</code> but the problem is that when I try to read this values through a pipe they still needs to be loaded when the page is rendered.</p>

<p><em>translate.pipe.ts</em></p>

<pre><code>@Pipe({name: 'translate'})
export class TranslatePipe implements PipeTransform {

    constructor(private _translation: TranslationService) {}

    transform(value: string, args: string[]) : any {
        return this._translation.getTranslationByKey(value);
    }
}
</code></pre>

<p>Any idea how to load all values from a JSON file before any page gets loaded?</p>