如何使用外部翻译网址在离子3中使用ngx翻译

Question

我认为这是一个时间问题，但我不知道如何解决它。当我使用我的本地文件时，翻译工作正常。但是当我想在主机中使用外部文件时，似乎请求正常，转换文件作为响应返回，但在应用程序中它只显示键名。不是价值观。澄清这里是我的代码。的 app.module.ts：

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
...
      imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
          }
        }),
    ...
    export function createTranslateLoader(http: HttpClient) {
      return new TranslateHttpLoader(http, 'https://www.****.com/generated-asset/app/translations/', '.json');
    }

app.component.ts：

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, ModalController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { TranslateService } from '@ngx-translate/core';

import { HomePage } from '../pages/home/home';
import { SplashPage } from '../pages/splash/splash';
import { LanguagesProvider } from '../providers/languages/languages';

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

export class MyApp {
  @ViewChild(Nav) navCtrl: Nav;
  rootPage: any = HomePage;
  langs: any;
  splash: any;

  constructor(private modalController: ModalController, public langProvide: LanguagesProvider,
    public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
    private storage: Storage, translate: TranslateService) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      //splashScreen.hide();
      this.splash = modalController.create(SplashPage);
      this.splash.present();
    });
    storage.ready().then(() => {
      storage.get('languageCode').then((lang) => {
        if (lang) {
          platform.setLang(lang, true);
          translate.setDefaultLang(lang);
          translate.use(lang);
        } else {
          platform.setLang('fa', true);
          translate.setDefaultLang('fa');
          translate.use('fa');
        }
      });
      this.storage.get('myDir').then((dir) => {
        if (dir) {
          platform.setDir(dir, true);
        } else {
          platform.setDir('rtl', true);
        }
      });
    });
    this.getLang();
  }

最后是我的一个html文件的一部分。例如 app.html：

<ion-list id="menu-list1">
  <ion-item text-end color="none" menuClose="" (click)="goTo('tourism')" class="mymenu">
    <ion-icon name="globe" item-start></ion-icon>
    {{'tourism' | translate}}
  </ion-item>
  <ion-item text-end color="none" menuClose="" (click)="goTo('blog')" class="mymenu">
    <ion-icon name="laptop" item-start></ion-icon>
    {{'blog' | translate}}
  </ion-item>
  <ion-item text-end color="none" menuClose="" (click)="goToAbout()" class="mymenu">
    <ion-icon name="information-circle" item-start></ion-icon>
    {{'about' | translate}}
  </ion-item>
</ion-list>