I have used ngx-translate in my ionic3 project. It's working fine in browser using ionic serve .But After build and running it in android it doesn't work.It returns only key from the translate file.
my ionic version used is:
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
Here are the code from my project
app.module.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 {}
app.component.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>
In assets\i18n:
- en.json
- np.json
en.json
{
"APPTITLE": "Parliament of Nepal"
}
np.json
{
"APPTITLE": "नेपालको संसद"
}
Here is my 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"
]
}
}