"this.appInits[i]" is not a function

Question

I am trying to use APP_INITIALIZER TO load data from config file. I'm getting following error:

"Unhandled Promise rejection: this.appInits[i] is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: this.appInits[i] is not a function"

Code:

import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Observable } from 'rxjs/Rx';  @Injectable() export class ApiConfig {    private urlList: any = null;    constructor(private http: Http) {    }    public getUrl(key: any) {     return this.urlList[key];   }    public loadConfig(){      let retPromise: Promise<any> =  this.http.get('./assets/config/api-config.json')       .map(res => res.json()).toPromise();      retPromise.then(resp => this.urlList=resp.urlList);     //this.urlList = retPromise.urlList;      return retPromise;   }  }   export  function apiConfigProvider(config: ApiConfig) {    config.loadConfig(); } 

Any help on what I'm doing wrong?

Edit:

Adam's solution fixed the original error. But now I see a new error:

TypeError: Cannot set property 'urlList' of undefined

As I understand there is no instance of ApiConfig created. But all the examples I see in loading the config file in Angular give same example. I wonder how to force the creation of ApiConfig class. And how I can make it a singleton? Below is the usage of ApiConfig.

export BaseService {  constructor (private config:ApiConfig){}   public GetUrl (key: string) {     return config.urlList[key];  }   } 

Answer: It looks like there is an issue with the way promise is created in above code. I modified my loadconfig() method as given in the link: https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9 this resolved my problem.

Answer 1

I think this is because you need to return the function in your export function statement:

export function apiConfigProvider(config: ApiConfig) {    return () => config.loadConfig(); }