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

Question

I am trying to use APP_INITIALIZER. To load data from a configuration file. I get the following error:

"Refusing a raw promise: 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 decision fixed the original error. But now I see a new error:

TypeError: cannot set property 'urlList' from undefined

As I understand it, there is no instance of ApiConfig. But all the examples that I see when loading the configuration file in Angular give the same example. I wonder how to force the creation of the ApiConfig class. And how can I make this a single? The following is an example of using ApiConfig.

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

Answer: It seems that there is a problem with how the promise is created in the code above. I changed my loadconfig () method as indicated in the link: https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9 this solved my problem.

Answer 1

I think this is due to the fact that you need to return the function to your export function operator:

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