angular - 带 ngx-translate 的 Ionic 3 - 延迟加载在浏览器中有效，但在构建后在 android 中无效

Question

我在我的 ionic3 项目中使用了 ngx-translate。它在使用 ionic serve 的浏览器中工作正常。但是在 android 中构建并运行它之后它不起作用。它只返回翻译文件中的 key 。

我使用的 ionic 版本是:

Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

这是我项目的代码

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IonicApp, IonicModule } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AppProviders } from './app.providers';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MyApp } from './app.component';





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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    }),
    IonicStorageModule.forRoot({
      name: '__mydb',
         driverOrder: ['indexeddb', 'sqlite', 'websql']
    }),
    IonicModule.forRoot(MyApp,{tabsPlacement: 'top',tabsHideOnSubPages:"true"}),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers:AppProviders.getProviders()
})
export class AppModule {}

应用程序组件.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } 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';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: string = "HomePage";

  pages: Array<{title: string, component: any, name:string}>;

  constructor(
    platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    private storage: Storage,
    translate: TranslateService) {
    translate.setDefaultLang('np');
    translate.use('np');


    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'home', component: "HomePage", name:"home"},
      { title: 'speaker', component: "SpeakerPage", name:"microphone"},
    ];
  }


  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

}

app.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar class="site-title">
      <img src="assets/img/logo.png" />
      <ion-title>{{'APPTITLE' | translate }}</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list class="side-menu">
      <button menuClose ion-item *ngFor="let p of pages" icon-left (click)="openPage(p)">
        <ion-icon [name]="p.name"></ion-icon>
        {{p.title | translate}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在 assets\i18n 中:

• zh.json
• np.json

zh.json

{
  "APPTITLE": "Parliament of Nepal"
}

np.json

{
  "APPTITLE": "नेपालको संसद"
}

这是我的 package.json

{
    "name": "lpsn-mobile-app",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/in-app-browser": "^4.2.1",
        "@ionic-native/native-audio": "^4.2.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/sqlite": "^4.2.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic-native/streaming-media": "^4.2.1",
        "@ionic/storage": "^2.0.1",
        "@ngx-translate/core": "^7.2.1",
        "@ngx-translate/http-loader": "^0.1.0",
        "com.hutchind.cordova.plugins.streamingmedia": "~0.1.4",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-nativeaudio": "^3.0.9",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-streaming-media": "^1.0.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-sqlite-storage": "^2.0.4",
        "ionic-angular": "3.6.0",
        "ionic-audio": "^3.0.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "ng2-select": "^1.2.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-sqlite-storage": {},
            "com.hutchind.cordova.plugins.streamingmedia": {},
            "cordova-plugin-nativeaudio": {}
        },
        "platforms": [
            "android"
        ]
    }
}

Answer 1

从以下位置删除 ./:

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

=> 在将 src 写入 assets 时，不要写任何 ./ 或 ../。

在app.modules.ts中写入:

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

或现在

export function createTranslateLoader(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
}

对我有用。