angular2 Build Problem useFactory mit Funktion

Question

Als Anfänger in eckigen, laufe ich über ein Problem beim Versuch, meine App über angular-cli zu bauen.

Danach folgt tutorial:

Mein appModule wie folgt aussieht:

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

Wenn es Gebäude erhalte ich:

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) 

Wenn ich ng serve verwenden die App ohne Probleme funktioniert.

Answer 1

starten:

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

Wenn Sie versuchen, eine AoT-Kompilierung durchzuführen, die bei der Lambda-Funktion fehlschlägt, müssen Sie sie exportieren. Bei der Verwendung von ng-serve wird die JiT-Kompilierung verwendet.

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

Answer 2

Ich habe das vorher gesehen, und nicht wirklich sicher, was diesen Fehler verursacht (dh warum es in einigen Fällen funktioniert und andere nicht), aber Sie können es lösen, indem Sie tun, was der Fehler sagt: "Überlegen Sie Ersetzen der Funktion oder Lambda durch einen Verweis auf eine exportierte Funktion ".

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

... 

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

Answer 3

Statt einer Inline-Funktion, verwenden Sie eine explizite Funktion:

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

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