[SOLVED] RC0 how to define provide factory?

Ionic Framework ionic-v3
#1

I implemented my own Http interceptor and till Beta 11 I use to define/load it in the app.ts provider as following:

ionicBootstrap(MyApp, [
   provide(Http, {
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpInterceptorService(backend, defaultOptions),
   deps: [XHRBackend, RequestOptions]
})]

Anyone knows how to achieve that in RC0?

1 Like
#2

This is how I did it… It works fine during development BUT it fails during the build process with error:

ngc error: 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…

In the app.module.ts file under @NgModule, providers array do something similar to the following:

providers: [
...
    ,{
      provide: Http,
      useFactory: function(backend: XHRBackend, defaultOptions: RequestOptions) {
        return new HttpInterceptorService(backend, defaultOptions)
      },
      deps: [XHRBackend, RequestOptions]
    }
  ]

Any idea to bypass the error during the build process?

#3

Using an exported function will fix the issue during the build process.

export function customHttpHelperFactory(backend: XHRBackend, defaultOptions: RequestOptions) {
  return new CustomHttp(backend, defaultOptions);
}
@NgModule({
....
    providers: [
    ...
        ,{
          provide: Http,
          useFactory: customHttpHelperFactory,
          deps: [XHRBackend, RequestOptions]
        }
      ]
})

For more information take a look at chuckjaz’s answer here

4 Likes
#4

Thx a lot sir, seems to work fine

I’ve got right now some other bug, but I see the debugger going in my class, so it looks promising

#5

thx @dimchar, tested again work like a charm!

#6

Since RC0, i have the same kind of problem, i have added a provider to my project with ionic -g provider myprovider command.
But when i try to use it inside another page, i have a build error like

Error: Could not resolve '../../providers/myprovider/myprovider'

I am doing the import in my page like :

import { Myprovider } from '../providers/myprovider/myprovider';

I have added this in my app.module.ts

import { Myprovider } from '../providers/myprovider/myprovider';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    UserDetail
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
   MyApp,
    HomePage,
    UserDetail
  ],
  providers: [
    Myprovider
  ]
})
#7

this solve my problem :wink: