我从昨天开始无法在浏览器中测试我的离子3应用程序因为我收到与 TranslateService 相关的以下错误。这似乎与我的代码无关,因为当我切换到我以前的版本时我也遇到了同样的问题,尽管它在那一刻工作正常。我尝试重新安装节点模块,但仍然没有运气。你知道我该怎么做才能解决这个问题吗?谢谢!
错误错误:未捕获(在承诺中):错误:无法解决所有问题 TranslateService的参数:(?,?,?,?,?,[object Object], [object Object])。错误:无法解析所有参数 TranslateService :(?,?,?,?,?,[object Object],[object Object])。 在syntaxError(compiler.js:466) at CompileMetadataResolver._getDependenciesMetadata(compiler.js:15544) at CompileMetadataResolver._getTypeMetadata(compiler.js:15379) at CompileMetadataResolver._getInjectableMetadata(compiler.js:15359) 在CompileMetadataResolver.getProviderMetadata(compiler.js:15719) 在compiler.js:15630 在Array.forEach() 在CompileMetadataResolver._getProvidersMetadata(compiler.js:15590) 在compiler.js:15080 在Array.forEach() 在syntaxError(compiler.js:466) at CompileMetadataResolver._getDependenciesMetadata(compiler.js:15544) at CompileMetadataResolver._getTypeMetadata(compiler.js:15379) at CompileMetadataResolver._getInjectableMetadata(compiler.js:15359) 在CompileMetadataResolver.getProviderMetadata(compiler.js:15719) 在compiler.js:15630 在Array.forEach() 在CompileMetadataResolver._getProvidersMetadata(compiler.js:15590) 在compiler.js:15080 在Array.forEach() 在c(polyfills.js:3) 在c(polyfills.js:3) 在polyfills.js:3 at t.invokeTask(polyfills.js:3) at Object.onInvokeTask(core.js:4617) at t.invokeTask(polyfills.js:3) 在r.runTask(polyfills.js:3) 在o(polyfills.js:3)
从我的 package.json 我可以看到:@ ngx-translate / core“:”^ 9.1.1“和@ngx-translate / http-loader”:“^ 2.0.1”
我的离子信息
@ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0
全球套餐:
cordova (Cordova CLI) : 8.0.0
本地包裹:
@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
系统:
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
环境变量:
ANDROID_HOME : /usr/local/Cellar/android-sdk/24.1.2/
其他:
backend : pro
答案 0 :(得分:4)
今天我们在我们的一个工作站中遇到了同样的问题,它与其他工作站共享相同的node_module文件夹! 该错误似乎与最新的Chrome更新版本或生成的ts源地图或两者相关,因为当我们在开发模式下运行我们的应用程序时,其他浏览器工作正常...... 快速解决方法是进行生产构建并将其加载到Chrome上,然后在开发模式下再次尝试。 至少这对我们有用,也许对别人有用。
答案 1 :(得分:1)
+1问题。很抱歉发布作为答案 - 没有足够的评论点)
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",
昨天工作得很好,从那以后没有任何改变或升级。 我在开发模式下使用angular-cli,有趣的是,如果使用--prod进行生产,则没有这样的错误。希望它能以某种方式解决这个问题!
答案 2 :(得分:0)
我也有相同的版本 @ ngx-translate / core":" ^ 9.1.1"和@ ngx-translate / http-loader":" ^ 2.0.1"
您可以使用我的package.json检查角度依赖关系和ionic-app脚本版本。这些版本对我有用。
"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.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.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);
}
}