1. 技术文章
  2. Can't resolve all parameters for TranslateService: (?, ?, ?, ?, ?, [object Object]

Can't resolve all parameters for TranslateService: (?, ?, ?, ?, ?, [object Object]

由 半腔热情 提交于 2019-12-02 12:30:41

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.

+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!

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);
    }
}
标签
ionic3
ngx-translate
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!