CookieXSRFStrategy not working in AOT mode @angular

Question

I am providing 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 }
  ],

working fine with watch/serve on second build but when building with --prod flag, 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 50:34 in the original .ts file), resolving symbol AppModule 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, found that I have to use a reference to an exported function, so using like:

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 was giving runtime error: as

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

changing useValue in provide to useFactory fixed the problem

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