ERROR in Error encountered resolving symbol values statically - Can't build Angular 2 app

Question

When I run the ng serve command, I am getting this error:

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 42:45 in the origi nal .ts file), resolving symbol AppModule in C:/myapp/src/app/app.module.ts

This is my app.module.ts

...

import { APP_INITIALIZER } from '@angular/core';
import { AppConfig } from './app.config';

...

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'listings', component: ListingComponent },
  { path: 'add-listing', component: AddListingComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    AppConfig,
    { provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The line it's complaining about is:

{ provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true }

This is my app.config.ts (AppConfig) class:

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class AppConfig {

    private config: Object = null;

    constructor(private http: Http) { }

    public get(key: any) {
        return this.config[key];
    }

    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('config.json').map( res => res.json() ).catch((error: any):any => {
                console.log('Configuration file "config.json" could not be read');
                resolve(true);
                return Observable.throw(error.json().error || 'Internal Server Srror');
            }).subscribe( (responseData: Object) => {
                this.config = responseData;
                resolve(true);
            });
        });
    }
}

Here are my tool versions:

angular-cli: 1.0.0-beta.28.3
node: 7.7.2
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9

I am editing the code in Visual Studio Code and running the ng serve command in the embedded console. Any ideas?

Answer 1

Thanks to this answer; https://stackoverflow.com/a/41263119/2332336

I have fixed it like this:

export function appConfigFactory(config: AppConfig) {
  return () => config.load();
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    AppConfig,
    { provide: APP_INITIALIZER, useFactory: appConfigFactory, deps: [AppConfig], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }