refactor(ionic): update example to the lates ionic release (#556)

README.md

@@ -134,7 +134,7 @@ export class AppModule { }
 
 ##### AoT
 
-If you want to configure a custom `TranslateLoader` while using [AoT compilation](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) or [Ionic 2](http://ionic.io/), you must use an exported function instead of an inline function.
+If you want to configure a custom `TranslateLoader` while using [AoT compilation](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) or [Ionic](http://ionic.io/), you must use an exported function instead of an inline function.
 
 ```ts
 export function createTranslateLoader(http: Http) {
@@ -295,7 +295,7 @@ To render them, simply use the `innerHTML` attribute with the pipe on any elemen
 	  // do something
 	});
     ```
-    
+
 #### Methods:
 
 - `setDefaultLang(lang: string)`: Sets the default language to use as a fallback
@@ -372,7 +372,7 @@ Setup the Missing Translation Handler in your module import by adding it to the
         })
     ],
     providers: [
-        
+
     ],
     bootstrap: [AppComponent]
 })

examples/ionic/config.xml

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="io.ionic.ngx-translate-ionic" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>ngx-translate-ionic</name>
+    <description>An awesome Ionic/Cordova app.</description>
+    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
+    <content src="index.html"/>
+    <access origin="*"/>
+    <allow-navigation href="http://ionic.local/*"/>
+    <allow-intent href="http://*/*"/>
+    <allow-intent href="https://*/*"/>
+    <allow-intent href="tel:*"/>
+    <allow-intent href="sms:*"/>
+    <allow-intent href="mailto:*"/>
+    <allow-intent href="geo:*"/>
+
+    <preference name="webviewbounce" value="false"/>
+    <preference name="UIWebViewBounce" value="false"/>
+    <preference name="DisallowOverscroll" value="true"/>
+    <preference name="android-minSdkVersion" value="16"/>
+    <preference name="BackupWebStorage" value="none"/>
+    <preference name="SplashMaintainAspectRatio" value="true"/>
+    <preference name="FadeSplashScreenDuration" value="300"/>
+
+    <!--
+      Change these to configure how the splashscreen displays and fades in/out.
+      More info here: https://github.com/apache/cordova-plugin-splashscreen
+    -->
+    <preference name="SplashShowOnlyFirstTime" value="false"/>
+    <preference name="SplashScreen" value="screen"/>
+    <preference name="SplashScreenDelay" value="3000"/>
+
+    <platform name="android">
+        <allow-intent href="market:*"/>
+        <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
+        <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
+        <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
+        <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
+        <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
+        <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
+        <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
+        <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
+        <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
+        <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
+        <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
+        <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
+        <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
+        <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
+        <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
+        <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
+        <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
+        <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
+    </platform>
+
+    <platform name="ios">
+        <allow-intent href="itms:*"/>
+        <allow-intent href="itms-apps:*"/>
+        <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
+        <icon src="resources/ios/icon/[email protected]" width="114" height="114"/>
+        <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
+        <icon src="resources/ios/icon/[email protected]" width="80" height="80"/>
+        <icon src="resources/ios/icon/[email protected]" width="120" height="120"/>
+        <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
+        <icon src="resources/ios/icon/[email protected]" width="100" height="100"/>
+        <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
+        <icon src="resources/ios/icon/[email protected]" width="120" height="120"/>
+        <icon src="resources/ios/icon/[email protected]" width="180" height="180"/>
+        <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
+        <icon src="resources/ios/icon/[email protected]" width="144" height="144"/>
+        <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
+        <icon src="resources/ios/icon/[email protected]" width="152" height="152"/>
+        <icon src="resources/ios/icon/[email protected]" width="167" height="167"/>
+        <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
+        <icon src="resources/ios/icon/[email protected]" width="58" height="58"/>
+        <icon src="resources/ios/icon/[email protected]" width="87" height="87"/>
+        <splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
+        <splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
+        <splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/>
+        <splash src="resources/ios/splash/Default-Landscape-736h.png" width="2208" height="1242"/>
+        <splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
+        <splash src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" height="2048"/>
+        <splash src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/>
+        <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
+        <splash src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" height="2732"/>
+        <splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
+        <splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
+        <splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
+    </platform>
+
+    <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
+    <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
+    <plugin name="cordova-plugin-console" spec="1.0.5"/>
+    <plugin name="cordova-plugin-statusbar" spec="2.2.2"/>
+    <plugin name="cordova-plugin-device" spec="1.1.4"/>
+    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
+</widget>

examples/ionic/ionic.config.json

@@ -0,0 +1,5 @@
+{
+  "name": "ngx-translate-ionic",
+  "app_id": "",
+  "type": "ionic-angular"
+}

examples/ionic/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "ngx-translate-ionic",
+  "author": "Ionic Framework",
+  "homepage": "http://ionicframework.com/",
+  "private": true,
+  "description": "ionic2: An Ionic project",
+  "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.2",
+    "@angular/compiler": "4.1.2",
+    "@angular/compiler-cli": "4.1.2",
+    "@angular/core": "4.1.2",
+    "@angular/forms": "4.1.2",
+    "@angular/http": "4.1.2",
+    "@angular/platform-browser": "4.1.2",
+    "@angular/platform-browser-dynamic": "4.1.2",
+    "@ionic-native/core": "3.12.1",
+    "@ionic-native/splash-screen": "3.12.1",
+    "@ionic-native/status-bar": "3.12.1",
+    "@ionic/storage": "2.0.1",
+    "@ngx-translate/core": "^6.0.1",
+    "@ngx-translate/http-loader": "0.0.3",
+    "ionic-angular": "3.3.0",
+    "ionicons": "3.0.0",
+    "rxjs": "5.1.1",
+    "sw-toolbox": "3.4.0",
+    "zone.js": "^0.8.11"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "1.3.7",
+    "@ionic/cli-plugin-ionic-angular": "1.3.0",
+    "typescript": "2.3.4"
+  }
+}

examples/ionic/src/app/app.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { Platform, Config } from 'ionic-angular';
+
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { TabsPage } from '../pages/tabs/tabs';
+
+
+@Component({
+  template: `<ion-nav [root]="rootPage"></ion-nav>`
+})
+export class MyApp {
+
+  rootPage: any = TabsPage;
+
+  constructor(private platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen, private translate: TranslateService, private config: Config) {
+    this.initTranslate();
+  }
+
+  ionViewDidLoad() {
+    this.platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      this.statusBar.styleDefault();
+      this.splashScreen.hide();
+    });
+  }
+
+  initTranslate() {
+    // Set the default language for translation strings, and the current language.
+    this.translate.setDefaultLang('en');
+
+    if (this.translate.getBrowserLang() !== undefined) {
+      this.translate.use(this.translate.getBrowserLang());
+    } else {
+      this.translate.use('en'); // Set your language here
+    }
+
+    this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
+      this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
+    });
+  }
+
+}

examples/ionic/src/app/app.module.ts

@@ -0,0 +1,57 @@
+import { NgModule, ErrorHandler } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule, Http } from '@angular/http';
+import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { Storage, IonicStorageModule } from '@ionic/storage';
+
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+
+import { MyApp } from './app.component';
+import { AboutPage } from '../pages/about/about';
+import { ContactPage } from '../pages/contact/contact';
+import { HomePage } from '../pages/home/home';
+import { TabsPage } from '../pages/tabs/tabs';
+
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+export function createTranslateLoader(http: Http) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+@NgModule({
+  declarations: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  imports: [
+    BrowserModule,
+    HttpModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [Http]
+      }
+    }),
+    IonicModule.forRoot(MyApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    { provide: ErrorHandler, useClass: IonicErrorHandler }
+  ]
+})
+export class AppModule { }

examples/ionic2/src/index.html → examples/ionic/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Angular 2 ng2-translate with Ionic 2</title>
+  <title>Ionic App</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
@@ -19,7 +19,7 @@
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('service-worker.js')
         .then(() => console.log('service worker installed'))
-        .catch(err => console.log('Error', err));
+        .catch(err => console.error('Error', err));
     }
   </script>-->
 

examples/ionic2/src/manifest.json → examples/ionic/src/manifest.json

@@ -10,4 +10,4 @@
   }],
   "background_color": "#4e8ef7",
   "theme_color": "#4e8ef7"
-}
+}

examples/ionic/src/pages/about/about.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { AboutPage } from './about';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  declarations: [
+    AboutPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(AboutPage),
+    TranslateModule.forChild()
+  ],
+  exports: [
+    AboutPage
+  ]
+})
+export class AboutPageModule { }

examples/ionic2/src/pages/about/about.ts → examples/ionic/src/pages/about/about.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 
-import { NavController } from 'ionic-angular';
+import { IonicPage, NavController } from 'ionic-angular';
 
+@IonicPage()
 @Component({
   selector: 'page-about',
   templateUrl: 'about.html'

examples/ionic2/src/pages/contact/contact.html → examples/ionic/src/pages/contact/contact.html

@@ -8,7 +8,7 @@
   <ion-list>
     <ion-list-header>{{ 'CONTACT.TWITTER_MESSAGE' | translate }}</ion-list-header>
     <ion-item>
-      <ion-icon name="ionic" item-left></ion-icon>
+      <ion-icon name="ionic" item-start></ion-icon>
       @ionicframework
     </ion-item>
   </ion-list>

examples/ionic/src/pages/contact/contact.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ContactPage } from './contact';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  declarations: [
+    ContactPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(ContactPage),
+    TranslateModule.forChild()
+  ],
+  exports: [
+    ContactPage
+  ]
+})
+export class AboutPageModule { }

examples/ionic2/src/pages/contact/contact.ts → examples/ionic/src/pages/contact/contact.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 
-import { NavController } from 'ionic-angular';
+import { IonicPage, NavController } from 'ionic-angular';
 
+@IonicPage()
 @Component({
   selector: 'page-contact',
   templateUrl: 'contact.html'

examples/ionic/src/pages/home/home.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { HomePage } from './home';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  declarations: [
+    HomePage,
+  ],
+  imports: [
+    IonicPageModule.forChild(HomePage),
+    TranslateModule.forChild()
+  ],
+  exports: [
+    HomePage
+  ]
+})
+export class AboutPageModule { }