title: Angular2 : How to load JSON data before App init
body: <p>In my Angular app, I want to load a JSON data before app init, which I store in a service and use it through out my application.</p>
  
  <p>I used resolver for loading the data before app init as suggessted in <a href="https://stackoverflow.com/questions/38300116/angular2-load-configuration-from-backend-on-startup">Angular2 load configuration from backend on startup</a>. But the solution threw error when I did ng serve or ng build. </p>
  
  <blockquote>
    <p>ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 43:19 in the original .ts file), resolving symbol AppModule in /Users/name/src/app/app.module.ts</p>
  </blockquote>
  
  <p>Please let me know how this error can be resolved or if there is any other way to load data before app init.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { APP_INITIALIZER } from '@angular/core';
  import { SearchService } from './backend.service';
  import { BackendResolver } from './backend.resolver';
  import { MyService } from './my.service';
  
  providers: [
  SearchService,
  { provide: APP_INITIALIZER,
    useFactory: (config:SearchService) =&gt; () =&gt; config.call(),
    deps: [SearchService],
    multi: true },
    BackendResolver,
    MyService
   ],
   bootstrap: [AppComponent]
  </code></pre>
  
  <p><strong>backend.service.ts</strong></p>
  
  <pre><code>import { Inject, Injectable } from '@angular/core';
  import { Http, URLSearchParams, Headers, RequestOptions } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class SearchService {
  jsonData;
  constructor(
      private http: Http,
  ) { }
  
  call() {
      return new Promise((resolve) =&gt; {
          this.http.get('assets/appData.json').map(res =&gt; res.json())
              .subscribe(jsonData =&gt; {
                  this.jsonData = jsonData;
                  resolve();
              });
      });
    }
  }
  </code></pre>
  
  <p><strong>backend.resolver.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Rx';
  import { SearchService } from './backend.service';
  
  @Injectable()
  export class BackendResolver implements Resolve&lt;any&gt; {
    constructor(
    private searchService: SearchService
    ) {}
  
  resolve(route: ActivatedRouteSnapshot): Promise&lt;any&gt; {
    return this.searchService.call();
   }
  }
  </code></pre>
  
  <p><strong>my.service.ts</strong></p>
  
  <pre><code>import { Inject, Injectable } from '@angular/core';
  
  @Injectable()
  export class MyService {
      resources;
      constructor() { }
      public getData() {
          return this.resources;
      }
  
      public saveData(param) {
          this.resources = param;
      }
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MyService } from './my.service';
  import { SearchService } from './backend.service'
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    jsonData: any;
    constructor(
      private myService: MyService,
      private searchService: SearchService
      ) {}
      ngOnInit() {
        this.jsonData = this.searchService.jsonData;
        this.myService.saveData(this.jsonData);
      }
  }
  </code></pre>
  
  <p><strong>footer.component.ts</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
      import { MyService } from '../my.service';
      @Component({
          selector: 'my-footer',
          templateUrl: './footer.component.html',
          styleUrls: ['./footer.component.scss']
      })
      export class FooterComponent implements OnInit {
          contactUs: any;
          constructor(
              private myService: MyService
          ) { }
          ngOnInit() {
              this.contactUs=this.myService.getData().contactUs;
          }
      }
  </code></pre>