Ocombe/ng2-translate Bug in Ionic Beta 7 - Argument of type 'Http' is not assignable to parameter of type 'Http' #132

Ionic Framework ionic-v3
1

I integrated the ng2-translate and it was working cool in Beta 6. When I upgraded to Beta 7 this week, I am getting this error in Terminal on ionic serve

TypeScript error: app/app.ts(27,79): Error TS2345: Argument of type 'Http' is not assignable to parameter of type 'Http'.
  Property '_backend' is protected but type 'Http' is not a class derived from 'Http'.

useFactory          :   (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),:

In above line, error is thrown at the first http parameter passed to TranslateStaticLoader

Raised an issue in their Github Repo too.

Would be great, If someone could give a quick fix, while I wait for the plugin author to provide a proper fix :slight_smile:

2

I assume when you upgraded ionic2 to beta7 you also updated ng2-translate to the latest version which works with Angular RC? ng2-translate version 2.1.0 is working for me.

3

This is how I have it:

providers:   [provide(TranslateLoader, {
            useFactory: (http: Http): any => new TranslateStaticLoader(http, 'translate', '.json'),
            deps:       [Http],
        }),
        TranslateService],
4

Wow. It worked. Thanks :slight_smile:
I was using some older version of ng2-translate How dumb of me!

5

I am getting same typescript error while including ng-2 translate providers in useFactory row while using ng2-translate version 2.1.0:

Argument of type ‘Http’ is not assignable to parameter of type ‘Http’.
Property ‘_backend’ is protected but type ‘Http’ is not a class derived from ‘Http’.

provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, ‘assets/i18n’, ‘.json’),
deps: [Http]
}), TranslateService

package.json
{
“dependencies”: {
"@angular/common": “2.0.0-rc.1”,
"@angular/compiler": “2.0.0-rc.1”,
"@angular/core": “2.0.0-rc.1”,
"@angular/http": “2.0.0-rc.1”,
"@angular/platform-browser": “2.0.0-rc.1”,
"@angular/platform-browser-dynamic": “2.0.0-rc.1”,
"@angular/router": “2.0.0-rc.1”,
“ct-angular2-color-picker”: “1.0.0”,
“es6-shim”: “^0.35.0”,
“ionic-angular”: “^2.0.0-beta.7”,
“ionic-native”: “^1.1.0”,
“ionicons”: “3.0.0”,
“ng2-translate”: “2.1.0”,
“reflect-metadata”: “0.1.3”,
“rxjs”: “5.0.0-beta.6”,
“zone.js”: “0.6.12”
},
“devDependencies”: {
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“ionic-gulp-browserify-typescript”: “^1.1.0”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^2.0.0”,
“run-sequence”: “1.1.5”
},
“name”: “xxxx”,
“description”: “xxxx: An Ionic project”,
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”,
“cordova plugin add cordova-plugin-x-toast”
],
“cordovaPlatforms”: []
}

Any ideas?

6

@ksnidalova I’ve this in my app.ts:

provide(TranslateLoader, {
   useFactory: (http: Http): any => new TranslateStaticLoader(http, 'translate', '.json'),
   deps:       [Http],
}), TranslateService
7

I solved the problem by removing

from my package.json file which didn’t work anyway. Then I deleted all node_modules and ran npm install again. The error must have been caused by some dependency conflict, because it works okay now. Try to check for module conflicts.