CookieXSRFStrategy not working in AOT @angular mode

Question

I provide CookieXSRFStrategy for XSRFStrategy in app.module.ts

 providers: [ { provide: APP_BASE_HREF, useValue: '/order/' }, { provide: XSRFStrategy, useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken') }, { provide: RequestOptions, useClass: DefaultRequestOptions } ], 

works fine with watch / serve in the second build, but when created with the --prod flag, getting this error:

Error in error. Function calls are not supported. Consider replacing a function or lambda with a link to the exported function (position 50:34 in the .ts file), allowing the AppModule character in E: /repo/src/app/app.module.ts

ng --version

 @angular/cli: 1.0.0 node: 6.9.1 os: win32 x64 @angular/common: 4.0.0 @angular/compiler: 4.0.0 @angular/core: 4.0.0 @angular/forms: 4.0.0 @angular/http: 4.0.0 @angular/platform-browser: 4.0.0 @angular/platform-browser-dynamic: 4.0.0 @angular/router: 4.0.0 @angular/animations: 4.0.0 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.0 

Answer 1

Answering my own question, I found that I need to use the link to the exported function, therefore, using:

 providers: [ { provide: APP_BASE_HREF, useValue: '/order/' }, { provide: XSRFStrategy, useValue: cookieStrategy }, { provide: RequestOptions, useClass: DefaultRequestOptions } ], export function cookieStrategy() { return new CookieXSRFStrategy('csrftoken', 'X-CSRFToken'); } 

compiled well, but gave a runtime error: as

ERROR TypeError: this._xsrfStrategy.configureRequest is not a function

changing useValue to useFactory fixes the problem

 providers: [ { provide: APP_BASE_HREF, useValue: '/order/' }, { provide: XSRFStrategy, useFactory: cookieStrategy }, { provide: RequestOptions, useClass: DefaultRequestOptions } ],