如何在 ionic 3 中使用 ngx-translate 解决“ERROR SyntaxError: Unexpected token / in JSON at position 0”？

Posted 2023-03-13

【中文标题】如何在 ionic 3 中使用 ngx-translate 解决“ERROR SyntaxError: Unexpected token / in JSON at position 0”？

【英文标题】：How to solve "ERROR SyntaxError: Unexpected token / in JSON at position 0" using ngx-translate in ionic 3?

【发布时间】：2018-12-19 02:10:51

【问题描述】：

我在使用 ngx-translate 更改语言时遇到错误 在离子 3.

我的代码是： 1.我已经安装了

**npm install @ngx-translate/core @ngx-translate/http-loader --save** 

2。然后我在 app.module.ts 中导入了以下 3：

要使用 ngx-translate，必须先将其导入并添加到 在应用程序的 NgModule 中导入数组。这是一个例子 如何做到这一点：

import  TranslateModule, TranslateLoader  from '@ngx-translate/core';
import  TranslateHttpLoader  from '@ngx-translate/http-loader';
import  HttpModule, Http  from '@angular/http';

3.然后导出函数：

  export function createTranslateLoader(http: Http) 
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  

4.然后在@ngModule中导入模块

 @NgModule(
   declarations: [
    MyApp,
    MainPage,
    SearchPipe,
    // SortPipe
   ],
   imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot(
     loader: 
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    
  ),
 ]
)

5.然后在app.component.ts文件中导入TranslateService：

import  TranslateService, LangChangeEvent  from '@ngx-translate/core';

并放了

this.translate.onLangChange.subscribe((event: LangChangeEvent) => 
  console.log("onLangChange", event.translations)
)
this.translate.onDefaultLangChange.subscribe((event: LangChangeEvent) 
 => 
  console.log("onDefaultLangChange", event.translations)
) 

在构造函数中

6. then in home.ts

 import  TranslateService, LangChangeEvent  from '@ngx- translate/core';

在构造函数中：

  translate.setDefaultLang('en');

外部构造函数：

  public changeLanguage(language)
  
    console.log("language", language);
    this.translate.use(language);
  

7.在home.html中

   <ion-title> 'title' | translate </ion-title>
   <div *ngIf="forUserContent"></div>
   <div *ngIf="forSupplierContent">
   <button ion-button full class="review-btn"(click)="showreviewlist()"> 'review' | translate </button>
   </div>
   <div *ngIf="forBothContent">
   <button ion-button full class="review-btn" (click)="showreviewlist()"> 'review' | translate </button>
   </div>

   <button ion-button (click)="changeLanguage('de')"> 'german' | translate </button>
   <button ion-button (click)="changeLanguage('en')"> 'english' | translate </button>

8.在 home.module.ts 中：

 import  TranslateModule, TranslateLoader  from '@ngx-translate/core';
 import  TranslateHttpLoader  from '@ngx-translate/http-loader';
 import  HttpClientModule, HttpClient  from '@angular/common/http';

 export function createTranslateLoader(http: Http) 
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 

 @NgModule(
   declarations: [
    HomeappPage,
   ],
   imports: [
     IonicPageModule.forChild(HomeappPage),
     HeaderComponentModule,
     FooterComponentModule,
     TranslateModule.forChild(
      loader: 
       provide: TranslateLoader,
       useFactory: (createTranslateLoader),
       deps: [Http]
     
   )
  ],
  exports: [
   HomeappPage,
   TranslateModule
  ]
)

9.创建了两个特定语言的json文件： 将语言数据存储在 .json 文件中。

1.en.json

   
     "title": "HOME",
     "german": "German",
     "english": "English",
     "review": "Review List"
   

2.de.json

    
     "title": "ZUHAUSE",
     "german": "Deutsch",
     "english": "Englisch",
     "review": "Überprüfungsliste",
    

当我更改时，我想要解决方案并从特定的 json 文件中获取字符串 应用程序中的语言

【问题讨论】：

意外令牌错误通常是因为 json 格式不正确。唯一让我印象深刻的是你对 Umulau 的使用。您是否在没有 Umulaut 的情况下进行过测试？

你的 de.json 在最后一项的末尾有一个,...jsoneditoronline.org/?id=ff35715a7b1240049e73cd1610fc2b55

@Jags 这不是问题。这些字符可以用 utf-8 读取

我从 de.json 中删除了 ,。仍然出现同样的错误

你能找到任何解决方案来使用管道获取 html 中的字符串吗？翻译。您的帮助将不胜感激。提前致谢。

【参考方案1】：

创建一个演示项目

ionic start DemoProject super

检查 app.module.ts 文件。他们使用 HttpClient 而不是 Http。我的正在使用这个配置。

如果您的 Angular 版本是 5，这是配置。 您可以从此处获取并安装正确的 @ngx-translate/core 和 @ngx-translate/http-loader 版本。 https://github.com/ngx-translate/core