Core: Can't use TranslateModule in Ionic app

[Cypaubr]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
An error is thrown on app launch:
Argument of type '{ loader: { provide: typeof TranslateLoader; factory: (http: HttpClient) => TranslateHttpLoader; ...' is not assignable to parameter of type 'TranslateModuleConfig'. Types of property 'loader' are incompatible. Type '{ provide: typeof TranslateLoader; factory: (http: HttpClient) => TranslateHttpLoader; deps: type...' is not assignable to type 'Provider'. Object literal may only specify known properties, and 'factory' does not exist in type 'Provider'.

Pieces of code
My app.modules.ts :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import {HttpClient, HttpClientModule} from "@angular/common/http";
import { Pro } from '@ionic/pro';
import { IonicStorageModule } from "@ionic/storage";
import { NgxQRCodeModule } from "ngx-qrcode2";
import { BarcodeScanner } from "@ionic-native/barcode-scanner";
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { MyApp } from './app.component';
import { ConnectPage } from '../pages/connect/connect';
import {MainPage} from "../pages/main/main";
import {SettingsPage} from "../pages/settings/settings";

import { CityfidApiServiceProvider } from '../providers/cityfid-api-service/cityfid-api-service';
import { CityfidStorageProvider } from '../providers/cityfid-storage/cityfid-storage';

import {SentryErrorHandler} from "../services/sentry-errorhandler";

export function HttpLoaderFactory(http: HttpClient){
  return new TranslateHttpLoader(http,'./assets/i18n/','.json');
}

@NgModule({
  declarations: [
    MyApp,
    ConnectPage,
    MainPage,
    SettingsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicStorageModule.forRoot({
      name: 'CityfidDB'
    }),
    IonicModule.forRoot(MyApp),
    NgxQRCodeModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        factory: (HttpLoaderFactory), //this line is the problem
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ConnectPage,
    MainPage,
    SettingsPage
  ],
  providers: [
    StatusBar,
    {provide: ErrorHandler, useClass: SentryErrorHandler},
    CityfidApiServiceProvider,
    CityfidStorageProvider,
    BarcodeScanner
  ]
})
export class AppModule {}

Please tell us about your environment:

• ngx-translate version: ^9.0.1

• Angular version: 4.4.4

• Ionic Info

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : browser 5.0.1
    Ionic Framework    : ionic-angular 3.8.0

System:

    Android SDK Tools : 26.1.1
    Node              : v9.2.0
    npm               : 5.5.1 
    OS                : Linux 4.13

Environment Variables:

    ANDROID_HOME : /home/cyprien/Android/Sdk

Misc:

    backend : pro

[ocombe]

Try with useFactory: HttpLoaderFactory, instead of factory: (HttpLoaderFactory),, somebody reported that this was throwing an error in another issue.

[Cypaubr]

UPDATE
Replacing factory by useFactory seems to fix the type issue but another error is upcoming (@ocombe It works too but this error is thrown):

Error: Cannot find module "rxjs/operators/share"
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:124829:7)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:128691:30)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.232 (http://localhost:8100/build/main.js:455:78)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.214 (http://localhost:8100/build/main.js:431:70)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
    at http://localhost:8100/build/main.js:1:1

[ocombe]

are you using rxjs 5.5.2 ?

[Cypaubr]

Updating libraries and rebuilding fixed the issue.