Can't resolve all parameters for TranslateServ

Question

I could not test my ionic 3 app in browser anymore since yesterday because I get the following error related to TranslateService. This seems not related to my code since I also face the same issue when I switch to my previous versions, although it worked fine at that moment. I tried to re-install the node modules with but still no luck. Do you know what I should do to solve this problem? Thanks!

ERROR Error: Uncaught (in promise): Error: Can't resolve all parameters for TranslateService: (?, ?, ?, ?, ?, [object Object], [object Object]). Error: Can't resolve all parameters for TranslateService: (?, ?, ?, ?, ?, [object Object], [object Object]). at syntaxError (compiler.js:466) at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15544) at CompileMetadataResolver._getTypeMetadata (compiler.js:15379) at CompileMetadataResolver._getInjectableMetadata (compiler.js:15359) at CompileMetadataResolver.getProviderMetadata (compiler.js:15719) at compiler.js:15630 at Array.forEach () at CompileMetadataResolver._getProvidersMetadata (compiler.js:15590) at compiler.js:15080 at Array.forEach () at syntaxError (compiler.js:466) at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15544) at CompileMetadataResolver._getTypeMetadata (compiler.js:15379) at CompileMetadataResolver._getInjectableMetadata (compiler.js:15359) at CompileMetadataResolver.getProviderMetadata (compiler.js:15719) at compiler.js:15630 at Array.forEach () at CompileMetadataResolver._getProvidersMetadata (compiler.js:15590) at compiler.js:15080 at Array.forEach () at c (polyfills.js:3) at c (polyfills.js:3) at polyfills.js:3 at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (core.js:4617) at t.invokeTask (polyfills.js:3) at r.runTask (polyfills.js:3) at o (polyfills.js:3)

From my package.json I can see: @ngx-translate/core": "^9.1.1" and @ngx-translate/http-loader": "^2.0.1"

My ionic info

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 7.1.0 browser 5.0.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.2 
Node              : v6.10.0
npm               : 3.10.10 
OS                : macOS High Sierra
Xcode             : Xcode 9.3.1 Build version 9E501 

Environment Variables:

ANDROID_HOME : /usr/local/Cellar/android-sdk/24.1.2/

Misc:

backend : pro

Answer 1

Today we faced the same problem in one of our workstation that shares the same node_module folder with the others! The error seems to be related with the latest Chrome updated version or the generated ts Source Maps or both, because when we were running our apps in dev mode to other browsers were working fine... A quick fix is to do a production build and load it on Chrome , then try again in dev mode. At least this worked for us and maybe will work for others to.

Answer 2

I also have the same version @ngx-translate/core": "^9.1.1" and @ngx-translate/http-loader": "^2.0.1"
You can check angular dependency and ionic-app script version with my package.json. It works for me with those version.

    "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.0",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/app-version": "^4.7.0",
    "@ionic-native/ble": "^4.7.0",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/globalization": "^4.7.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/network": "^4.7.0",
    "@ionic-native/screen-orientation": "^4.7.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "cordova-android": "6.3.0",
    "cordova-ios": "4.5.4",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-globalization": "^1.0.9",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.22.1",
    "moment-timezone": "^0.5.16",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2",
  }

App Module : app.module.ts

import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';

// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {Globalization} from '@ionic-native/globalization';
/****************************Pages*******************************/
import {myApp} from './app.component';
import {SignUp} from '../pages/sign_up/sign-up.component';

import {GlobalizationService} from '../providers/common_service/globalisation.service';


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

@NgModule({
    declarations: [
        myApp,
    ],
    imports: [
        IonicModule.forRoot(myApp, {
            mode: 'ios'
        }),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        myApp,
        SignUp,
    ],
    providers: [
        Globalization,
        GlobalizationService,
        //TODO TEST
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
})
export class AppModule {
}

App Component file: app.component.ts

import {Component, ViewChild} from '@angular/core';
import {Platform} from 'ionic-angular';

import {GlobalizationService} from '../providers/common_service/globalisation.service';
import {SignUp} from '../pages/sign_up/sign-up.component';

@Component({
    templateUrl: 'app.html'
})

export class myApp {
    @ViewChild(Nav) nav: Nav;

    rootPage: any = SignUp;

    pages: Array<{ title: string, component: any }>;

    constructor(private globalizationService: GlobalizationService) {

    }

    protected initializeApp() {
        this.globalizationService.initializeLocalization();
        this.platform.ready().then(() => {
            //Function initializeLocalization can also call here 
        });
    }
}

GlobalizationService: globalisation.service

import { Injectable } from '@angular/core';
import { Globalization } from '@ionic-native/globalization';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class GlobalizationService {
    public userLang:any;
    constructor(private globalization: Globalization,public translateService: TranslateService){}

    /*
     *  Function to initialize localization for application
    */
    public initializeLocalization(){
        console.log('in init location');
        this.globalization.getPreferredLanguage()
        .then(res => {
            console.log(res);
            if(res.value=="fr-FR"){
             this.userLang="fr";
             this.useLanguage(this.userLang);
            }
            else{
                this.translateService.setDefaultLang('en');
            }
        })
        .catch(e => {
            console.log(e)
            this.translateService.setDefaultLang('en');
        });
      }

    /**
     * Function to set language for application
     * @param language: Language to use
     */
    public useLanguage(language: string) {
        this.translateService.use(language);
    }
}

Answer 3

+1 to the issue. Sorry for posting as an answer - got no enough points to comment)

"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",

It worked perfectly yesterday, and nothing was changed or upgraded since then. I am using angular-cli in dev mode, and what is interesting is that there is no such error if serving with --prod for production. Hope it will help somehow to figure this out!