angular2 build issue useFactory with function

Question

As a beginner in angular, I am running across an issue whilst trying to build my app via angular-cli.

After following this tutorial:

My appModule looks like:

...
providers: [
{ provide: HttpService, useFactory: (backend: XHRBackend, options:     RequestOptions) => {
return new HttpService(backend, options); },
  deps: [XHRBackend, RequestOptions]}
]
...

When building it I get:

Error: 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 63:39 in the original .ts file), resolving symbol Ap
pModule in ../angular/app/src/app/app.module.ts
at positionalError (..\angular\app\node_modules\@angular\compiler-c
li\src\static_reflector.js:595:18)

When I use ng serve the app works without any problems.

Rares Matei · Accepted Answer · 2017-02-05 11:12:29Z

6

Try this:

export function httpServiceFactory(backend: XHRBackend, options: RequestOptions) {
  return new HttpService(backend, options);
}  
  
providers: [
  { 
    provide: HttpService, 
    useFactory: httpServiceFactory,
    deps: [XHRBackend, RequestOptions]
  }
]

When you're building it's trying to do AoT compilation which fails when encountering the lambda function, so you need to export it. While when using ng-serve it's using JiT compilation.

See: https://github.com/angular/angular/issues/11262#issuecomment-244266848

answered Feb 5, 2017 at 11:12

Rares Matei

2861 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Samsotha · Accepted Answer · 2017-02-05 11:10:56Z

1

I've seen this before, and not really sure what causes this error (i.e. why it works in some cases and others it doesn't), but you can resolve it by doing what the error says: "Consider replacing the function or lambda with a reference to an exported function".

export function httpFactory(backend: XHRBackend, options: RequestOptions) {
  return new HttpService(backend, options);
}

...

providers: [
  { 
    provide: HttpService,
    useFactory: httpFactory,
    deps: [XHRBackend, RequestOptions]
  }
]

answered Feb 5, 2017 at 11:10

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Comments

Günter Zöchbauer · Accepted Answer · 2017-02-05 11:11:06Z

1

Instead of an inline function, use an explicit function:

function httpFactory(backend: XHRBackend, options: RequestOptions) {
  return new HttpService(backend, options);
}

...
providers: [{ provide: HttpService, useFactory: httpFactory,
                deps: [XHRBackend, RequestOptions]}
]
...

answered Feb 5, 2017 at 11:11

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

angular2 build issue useFactory with function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related