Function calls are not supported. Consider replaci

Question

I'm using APP_INITIALIZER in my app and I have it setup in app.module.ts as follows with the necessary imports:

@NgModule({
  ...
  providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: (context: ContextService) => () => context.load(), deps: [ContextService], multi: true } ],
  ...
})

I get the following error when I build fresh (ng build -watch), subsequent builds work fine.

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 24:46 in the original .ts file), resolving symbol AppModule in C:/.../app.module.ts

I have tried moving () => context.load() into an exported function in the same file as so:

export function loadContext(context: ContextService) {
    return () => context.load();
}

...then altered the providers section of @NgModule:

@NgModule({
      ...
      providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: (context: ContextService) => loadContext(context), deps: [ContextService], multi: true } ],
      ...
    })

The build still fails initially as above with the same error. Subsequent builds work fine.

How do I solve this initial build error?

Answer 1

Move the inline closure to a function:

function loadContext(context: ContextService) {
  return () => context.load();
}

@NgModule({
  ...
  providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: loadContext, deps: [ContextService], multi: true } ],
  ...
})

See also How to pass parameters rendered from backend to angular2 bootstrap method