asynchronous - How do I defer loading a component until my signalr service is initialized? -

i have following types: dataservice - gets data server using signalr hub. appcomponent - entry point main application

the data service constructor follows.

constructor(private http: http) {     var hub = $.connection.spwhub;     hub.client.loademployees = this.loademployees;     $.connection.hub.start().done(() => {          ...     }); } 

my appcomponent follows:

constructor(service: dataservice) {         this.company = service.getcompany();     service.getemployees().then(employees => this.employees = employees);     this.departments = service.getdepartments(); }   

i following error of course because hub async call has not returned before hub connection made.

exception: error in ./appcomponent class appcomponent_host - inline template:0:0 caused by: signalr: connection has not been initialized. use .start().done() or .start().fail() run logic after connection has started.

what best way deal issue in angularjs2?

you can use app_initializer hook perform logic, prepped, whatever, need before rest of application runs.

in app.module.ts (or whatever main module is):

import { app_initializer, ngmodule }      "@angular/core"; export function init_app(employeeservice: employeeservice) {     return () => employeeservice.getemployees(); }  @ngmodule({     <...>     providers: [employeeservice, {         provide: app_initializer,         usefactory: init_app,         deps: [ employeeservice ],         multi: true     }] }) export class appmodule { } 

the service returning promise automatically handled:

getemployees() {     return <...function stuff ...>             .topromise(); } 

and here's github issue documented (no doc on angular.io site yet): https://github.com/angular/angular/issues/9047