html - วิธีแก้ปัญหา "ERROR SyntaxError: Unexpected token/in JSON at position 0" โดยใช้ ngx-translate ใน ionic 3?

ฉันได้รับข้อผิดพลาดดังกล่าว ขณะใช้งาน ngx-translate เพื่อเปลี่ยนภาษาใน Ionic 3

รหัสของฉันคือ: 1. ฉันได้ติดตั้งแล้ว

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

2. จากนั้นฉันได้ทำการนำเข้า 3 ด้านล่างใน app.module.ts:

ในการใช้ ngx-translate จำเป็นต้องนำเข้าและเพิ่มลงในอาร์เรย์ imports ใน 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. จากนั้นนำเข้า TranslateService ในไฟล์ app.component.ts:

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 เฉพาะ เมื่อฉันเปลี่ยนภาษาภายในแอปพลิเคชัน

คำตอบ #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