Ng5- APP_INITIALIZER - Run Code During App Initialization

Ng5- APP_INITIALIZER - Run Code During App Initialization
----------------------------------------------------------------------------
Before App Load excute promise for Base Url:
Method: 1
----------
import app-load as one module in app.module.ts instead iof provider with APP_INITIALIZER property
i.e
https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/


add provider and base url Service inside app.module.ts Providers section, with APP_INITIALIZER

https://devblog.dymel.pl/2017/10/17/angular-preload/


app.module.ts
--------------
import { JokesProvider } from './JokesProvider';

export function jokesProviderFactory(provider: JokesProvider) {
  return () => provider.load();
}


 @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    JokesProvider,
    { provide: APP_INITIALIZER, useFactory: jokesProviderFactory, deps: [JokesProvider], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


JokesProvider.service.ts
------------------------
@Injectable()
export class JokesProvider {

    private joke: JokeModel = null;

    constructor(private http: Http) {

    }

    public getJoke(): JokeModel {
        return this.joke;
    }


    //option :1  call Obserabletype of Promise direct service call
    load() {
        return new Promise((resolve, reject) => {
            this.http
                .get('https://api.icndb.com/jokes/random')
                .map(res => res.json())
                .subscribe(response => {
                    this.joke = response['value'];
                    resolve(true);
                })
        })
    }
// option:2 Call directly Prmoise/Observable to load - MAke eaen faster ( create seperate service file)
this.privateService.GetData().toPromise().then(
      (response:any) => {
//expected out put / result from API

}).catch((error) =>{
      console.log(error);


app.component.ts
-----------------
@Component({
  selector: 'app-root',
  template: `
  <h1>Joke of the day:</h1>
  <p>{{jokeModel.joke}}</p>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  jokeModel: JokeModel;
 
  constructor(jokesProvider: JokesProvider) {
    this.jokeModel = jokesProvider.getJoke();
  }

  ngOnInit() {
    console.log("AppComponent: OnInit()");
  }
}