Angular 2-4 - Make Http web API call and get access to result in different components

Question

I would like to make a web API call as soon as my app starts. This Http call should return an array of Json objects.

I want to create HTML elements (in my root app) depending on how many elements were returned and then access and display that data in different (child->child->child) components without grinding it down to all those childs from the root app.

I guess I have to create a service class.

Questions

1. Is a service instantiated as soon as the app is started or only when the first component is getting created that uses that service?
2. Can I use a promise to achieve my desired behavior or do I have to use observable (BehaviorSubject)?
3. According to 2. Is it possible to start a web API call (as soon as app starts) and then check from other indepentend components if the data already exists in my service and use it?

Answer 1

You can use APP_INITIALIZER to call the HTTP method on startup, like described in this question.

If you go this route - if you use promise, the app won't load until the JSON is downloaded, if you use observable, it will start downloading on startup and continue rendering everything else.

If you store the returned values in a field of the service you can access them from everywhere.

Some code: app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Http, HttpModule, JsonpModule } from '@angular/http';
import { UserService } from '../services/user.service';

<...>
@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    JsonpModule,
    routing
  ],
  declarations: [
    AppComponent,
    <...>
  ],
  providers: [
    <...>
    UserService,
    {provide: APP_INITIALIZER,
      useFactory: (userServ: UserService) => () => userServ.getUser(),
      deps: [UserService, Http],
      multi: true
    }
  ],
  bootstrap: [AppComponent]

user.service.ts

@Injectable()
export class UserService {

    public user: User;
    constructor(private http: Http) { }

    getUser(): Promise<User> {
        console.log('get user called');
        var promise = this.http.get('/auth/getuser', { headers: getHeaders() })
            .map(extractData)
            .toPromise();
        promise.then(user => {
            this.user = user;
            console.log(this.user);
        });
        return promise;
    }
}