Updating app to ionic-angular latest beta

angular.json

@@ -14,7 +14,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "progress": false,
             "outputPath": "www",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -25,6 +24,11 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
               }
             ],
             "styles": [
@@ -61,6 +65,9 @@
                   "maximumError": "5mb"
                 }
               ]
+            },
+            "ci": {
+              "progress": false
             }
           }
         },
@@ -72,6 +79,9 @@
           "configurations": {
             "production": {
               "browserTarget": "app:build:production"
+            },
+            "ci": {
+              "progress": false
             }
           }
         },
@@ -102,6 +112,12 @@
                 "output": "/assets"
               }
             ]
+          },
+          "configurations": {
+            "ci": {
+              "progress": false,
+              "watch": false
+            }
           }
         },
         "lint": {
@@ -146,6 +162,11 @@
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "app:serve"
+          },
+          "configurations": {
+            "ci": {
+              "devServerTarget": "app:serve:ci"
+            }
           }
         },
         "lint": {

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.photogallery" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>MyApp</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
@@ -82,9 +82,11 @@
     <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
     <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
-    <plugin name="cordova-plugin-camera" spec="4.0.3" />
     <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
         <string>Used to take pictures</string>
     </edit-config>
     <plugin name="cordova-sqlite-storage" spec="^2.5.1" />
+    <plugin name="cordova-plugin-camera" spec="~4.0.3" />
+    <engine name="android" spec="7.1.4" />
+    <engine name="ios" spec="4.5.5" />
 </widget>

e2e/src/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('new App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toContain('The world is your oyster.');
+    expect(page.getPageTitle()).toContain('Tab One');
   });
 });

e2e/src/app.po.ts

@@ -5,7 +5,7 @@ export class AppPage {
     return browser.get('/');
   }
 
-  getParagraphText() {
+  getPageTitle() {
-    return element(by.deepCss('app-root ion-content')).getText();
+    return element(by.css('ion-title')).getText();
   }
 }

ionic.config.json

@@ -1,8 +1,7 @@
 {
-  "name": "email-test",
+  "name": "photo-rc1",
   "integrations": {
     "cordova": {}
   },
-  "type": "angular",
+  "type": "angular"
-  "pro_id": "7b7e6724"
 }

ionic.starter.json

@@ -0,0 +1,12 @@
+{
+  "name": "Tabs Starter",
+  "baseref": "master",
+  "tarignore": [
+    "node_modules",
+    "package-lock.json",
+    "www"
+  ],
+  "scripts": {
+    "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run"
+  }
+}

package.json

@@ -1,69 +1,89 @@
 {
-    "name": "email-test",
+  "name": "photo-rc1",
-    "version": "0.0.1",
+  "version": "0.0.1",
-    "author": "Ionic Framework",
+  "author": "Ionic Framework",
-    "homepage": "http://ionicframework.com/",
+  "homepage": "http://ionicframework.com/",
-    "scripts": {
+  "scripts": {
-        "ng": "ng",
+    "ng": "ng",
-        "start": "ng serve",
+    "start": "ng serve",
-        "build": "ng build",
+    "build": "ng build",
-        "test": "ng test",
+    "test": "ng test",
-        "lint": "ng lint",
+    "lint": "ng lint",
-        "e2e": "ng e2e"
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "~7.1.4",
+    "@angular/core": "~7.1.4",
+    "@angular/forms": "~7.1.4",
+    "@angular/http": "~7.1.4",
+    "@angular/platform-browser": "~7.1.4",
+    "@angular/platform-browser-dynamic": "~7.1.4",
+    "@angular/router": "~7.1.4",
+    "@ionic-native/camera": "^5.0.0-beta.23",
+    "@ionic-native/core": "5.0.0-beta.21",
+    "@ionic-native/splash-screen": "5.0.0-beta.21",
+    "@ionic-native/status-bar": "5.0.0-beta.21",
+    "@ionic/angular": "^4.0.0-rc.2",
+    "@ionic/pro": "2.0.4",
+    "@ionic/storage": "^2.2.0",
+    "cordova-android": "7.1.4",
+    "cordova-ios": "4.5.5",
+    "cordova-plugin-camera": "~4.0.3",
+    "cordova-plugin-device": "^2.0.2",
+    "cordova-plugin-ionic-keyboard": "^2.1.3",
+    "cordova-plugin-ionic-webview": "^2.3.1",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-whitelist": "^1.3.3",
+    "cordova-sqlite-storage": "^2.6.0",
+    "core-js": "^2.5.4",
+    "rxjs": "~6.3.3",
+    "zone.js": "~0.8.26"
+  },
+  "devDependencies": {
+    "@angular-devkit/architect": "~0.11.4",
+    "@angular-devkit/build-angular": "^0.12.1",
+    "@angular-devkit/core": "~7.1.4",
+    "@angular-devkit/schematics": "~7.1.4",
+    "@angular/cli": "~7.1.4",
+    "@angular/compiler": "~7.1.4",
+    "@angular/compiler-cli": "~7.1.4",
+    "@angular/language-service": "~7.1.4",
+    "@ionic/angular-toolkit": "~1.2.0",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~10.12.0",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~3.1.4",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.12.0",
+    "typescript": "~3.1.6"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-camera": {},
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-sqlite-storage": {}
     },
-    "private": true,
+    "platforms": [
-    "dependencies": {
+      "android",
-        "@angular/common": "~7.0.0",
+      "ios"
-        "@angular/core": "~7.0.0",
+    ]
-        "@angular/forms": "~7.0.0",
+  }
-        "@angular/http": "~7.0.0",
+}
-        "@angular/platform-browser": "~7.0.0",
-        "@angular/platform-browser-dynamic": "~7.0.0",
-        "@angular/router": "~7.0.0",
-        "@ionic-native/camera": "^5.0.0-beta.21",
-        "@ionic-native/core": "5.0.0-beta.21",
-        "@ionic-native/splash-screen": "5.0.0-beta.21",
-        "@ionic-native/status-bar": "5.0.0-beta.21",
-        "@ionic/angular": "4.0.0-beta.16",
-        "@ionic/pro": "2.0.3",
-        "@ionic/storage": "^2.2.0",
-        "cordova-plugin-camera": "4.0.3",
-        "cordova-sqlite-storage": "^2.5.1",
-        "core-js": "^2.5.4",
-        "rxjs": "~6.3.3",
-        "zone.js": "~0.8.26"
-    },
-    "devDependencies": {
-        "@angular-devkit/architect": "~0.10.0",
-        "@angular-devkit/build-angular": "~0.10.0",
-        "@angular-devkit/core": "~7.0.0",
-        "@angular-devkit/schematics": "~7.0.0",
-        "@angular/cli": "~7.0.0",
-        "@angular/compiler": "~7.0.0",
-        "@angular/compiler-cli": "~7.0.0",
-        "@angular/language-service": "~7.0.0",
-        "@ionic/angular-toolkit": "~1.2.0",
-        "@types/node": "~10.12.0",
-        "@types/jasmine": "~2.8.8",
-        "@types/jasminewd2": "~2.0.3",
-        "codelyzer": "~4.5.0",
-        "jasmine-core": "~2.99.1",
-        "jasmine-spec-reporter": "~4.2.1",
-        "karma": "~3.0.0",
-        "karma-chrome-launcher": "~2.2.0",
-        "karma-coverage-istanbul-reporter": "~2.0.1",
-        "karma-jasmine": "~1.1.2",
-        "karma-jasmine-html-reporter": "^0.2.2",
-        "protractor": "~5.4.0",
-        "ts-node": "~7.0.0",
-        "tslint": "~5.11.0",
-        "typescript": "~3.1.6"
-    },
-    "description": "An Ionic project",
-    "cordova": {
-        "plugins": {
-            "cordova-plugin-camera": {},
-            "cordova-sqlite-storage": {}
-        }
-    }
-}

src/app/about/about.page.html

@@ -1,22 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Photo Gallery</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <ion-grid>
-    <ion-row>
-    <ion-col size="6" *ngFor="let photo of photoService.photos">
-        <img [src]="photo.data" />
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-
-  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
-    <ion-fab-button (click)="photoService.takePicture()">
-      <ion-icon name="camera"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
-</ion-content>

src/app/app.module.ts

@@ -14,7 +14,9 @@ import { IonicStorageModule } from '@ionic/storage';
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot()],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
+    IonicStorageModule.forRoot()
+  ],
   providers: [
     StatusBar,
     SplashScreen,

src/app/contact/contact.page.html

@@ -1,23 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Contact
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <ion-list>
-    <ion-list-header>
-      <ion-label>
-        Follow us on Twitter
-      </ion-label>
-    </ion-list-header>
-    <ion-item>
-      <ion-label>
-        <ion-icon name="logo-ionic" slot="start"></ion-icon>
-        @ionicframework
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</ion-content>

src/app/contact/contact.page.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-contact',
-  templateUrl: 'contact.page.html',
-  styleUrls: ['contact.page.scss']
-})
-export class ContactPage {}

src/app/home/home.page.html

@@ -1,10 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Home</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content padding>
-  The world is your oyster.
-  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
-</ion-content>

src/app/home/home.page.scss

@@ -1 +0,0 @@
-

src/app/home/home.page.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss']
-})
-export class HomePage {}

src/app/services/photo.service.ts

@@ -45,4 +45,3 @@ export class PhotoService {
 class Photo {
   data: any;
 }
-

src/app/tab1/tab1.module.ts

@@ -3,15 +3,15 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { HomePage } from './home.page';
+import { Tab1Page } from './tab1.page';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    RouterModule.forChild([{ path: '', component: HomePage }])
+    RouterModule.forChild([{ path: '', component: Tab1Page }])
   ],
-  declarations: [HomePage]
+  declarations: [Tab1Page]
 })
-export class HomePageModule {}
+export class Tab1PageModule {}

src/app/tab1/tab1.page.html

@@ -0,0 +1,41 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Tab One
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <ion-card class="welcome-card">
+      <ion-img src="/assets/shapes.svg"></ion-img>
+      <ion-card-header>
+        <ion-card-subtitle>Get Started</ion-card-subtitle>
+        <ion-card-title>Welcome to Ionic</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
+      </ion-card-content>
+    </ion-card>
+    <ion-list lines="none">
+      <ion-list-header>
+        <ion-label>Resources</ion-label>
+      </ion-list-header>
+      <ion-item href="https://beta.ionicframework.com/docs/">
+        <ion-icon slot="start" color="medium" name="book"></ion-icon>
+        <ion-label>Ionic Documentation</ion-label>
+      </ion-item>
+      <ion-item href="https://beta.ionicframework.com/docs/building/scaffolding">
+        <ion-icon slot="start" color="medium" name="build"></ion-icon>
+        <ion-label>Scaffold Out Your App</ion-label>
+      </ion-item>
+      <ion-item href="https://beta.ionicframework.com/docs/layout/structure">
+        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
+        <ion-label>Change Your App Layout</ion-label>
+      </ion-item>
+      <ion-item href="https://beta.ionicframework.com/docs/theming/basics">
+        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
+        <ion-label>Theme Your App</ion-label>
+      </ion-item>
+    </ion-list>
+</ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,4 @@
+.welcome-card ion-img {
+  max-height: 35vh;
+  overflow: hidden;
+}

src/app/tab1/tab1.page.spec.ts

@@ -1,21 +1,21 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HomePage } from './home.page';
+import { Tab1Page } from './tab1.page';
 
-describe('HomePage', () => {
+describe('Tab1Page', () => {
-  let component: HomePage;
+  let component: Tab1Page;
-  let fixture: ComponentFixture<HomePage>;
+  let fixture: ComponentFixture<Tab1Page>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [HomePage],
+      declarations: [Tab1Page],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HomePage);
+    fixture = TestBed.createComponent(Tab1Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/tab1/tab1.page.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss']
+})
+export class Tab1Page {}

src/app/tab2/tab2.module.ts

@@ -3,15 +3,15 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { AboutPage } from './about.page';
+import { Tab2Page } from './tab2.page';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    RouterModule.forChild([{ path: '', component: AboutPage }])
+    RouterModule.forChild([{ path: '', component: Tab2Page }])
   ],
-  declarations: [AboutPage]
+  declarations: [Tab2Page]
 })
-export class AboutPageModule {}
+export class Tab2PageModule {}

src/app/tab2/tab2.page.html

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Photo Gallery
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-grid>
+    <ion-row>
+    <ion-col col-6 *ngFor="let photo of photoService.photos">
+        <img [src]="photo.data" />
+        </ion-col>
+    </ion-row>
+  </ion-grid>
+  
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+      <ion-fab-button (click)="photoService.takePicture()">
+        <ion-icon name="camera"></ion-icon>
+      </ion-fab-button>
+  </ion-fab>
+</ion-content>

src/app/tab2/tab2.page.spec.ts

@@ -1,21 +1,21 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AboutPage } from './about.page';
+import { Tab2Page } from './tab2.page';
 
-describe('AboutPage', () => {
+describe('Tab2Page', () => {
-  let component: AboutPage;
+  let component: Tab2Page;
-  let fixture: ComponentFixture<AboutPage>;
+  let fixture: ComponentFixture<Tab2Page>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AboutPage],
+      declarations: [Tab2Page],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AboutPage);
+    fixture = TestBed.createComponent(Tab2Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/tab2/tab2.page.ts

@@ -2,11 +2,11 @@ import { Component } from '@angular/core';
 import { PhotoService } from '../services/photo.service';
 
 @Component({
-  selector: 'app-about',
+  selector: 'app-tab2',
-  templateUrl: 'about.page.html',
+  templateUrl: 'tab2.page.html',
-  styleUrls: ['about.page.scss']
+  styleUrls: ['tab2.page.scss']
 })
-export class AboutPage {
+export class Tab2Page {
   currentImage: any;
 
   constructor(public photoService: PhotoService) {  }
@@ -15,4 +15,4 @@ export class AboutPage {
     this.photoService.loadSaved();
   }
 
-}
+}

src/app/tab3/tab3.module.ts

@@ -3,15 +3,15 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { ContactPage } from './contact.page';
+import { Tab3Page } from './tab3.page';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    RouterModule.forChild([{ path: '', component: ContactPage }])
+    RouterModule.forChild([{ path: '', component: Tab3Page }])
   ],
-  declarations: [ContactPage]
+  declarations: [Tab3Page]
 })
-export class ContactPageModule {}
+export class Tab3PageModule {}

src/app/tab3/tab3.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Tab Three
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content></ion-content>

src/app/tab3/tab3.page.spec.ts

@@ -1,21 +1,21 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContactPage } from './contact.page';
+import { Tab3Page } from './tab3.page';
 
-describe('ContactPage', () => {
+describe('Tab3Page', () => {
-  let component: ContactPage;
+  let component: Tab3Page;
-  let fixture: ComponentFixture<ContactPage>;
+  let fixture: ComponentFixture<Tab3Page>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ContactPage],
+      declarations: [Tab3Page],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ContactPage);
+    fixture = TestBed.createComponent(Tab3Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/tab3/tab3.page.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tab3',
+  templateUrl: 'tab3.page.html',
+  styleUrls: ['tab3.page.scss']
+})
+export class Tab3Page {}

src/app/tabs/tabs.module.ts

@@ -7,19 +7,13 @@ import { FormsModule } from '@angular/forms';
 import { TabsPageRoutingModule } from './tabs.router.module';
 
 import { TabsPage } from './tabs.page';
-import { ContactPageModule } from '../contact/contact.module';
-import { AboutPageModule } from '../about/about.module';
-import { HomePageModule } from '../home/home.module';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    TabsPageRoutingModule,
+    TabsPageRoutingModule
-    HomePageModule,
-    AboutPageModule,
-    ContactPageModule
   ],
   declarations: [TabsPage]
 })

src/app/tabs/tabs.page.html

@@ -1,32 +1,20 @@
 <ion-tabs>
 
-  <ion-tab tab="home">
-    <ion-router-outlet name="home"></ion-router-outlet>
-  </ion-tab>
-  <ion-tab tab="about">
-    <ion-router-outlet name="about"></ion-router-outlet>
-  </ion-tab>
-  <ion-tab tab="contact">
-    <ion-router-outlet name="contact"></ion-router-outlet>
-  </ion-tab>
-
   <ion-tab-bar slot="bottom">
-
+    <ion-tab-button tab="tab1">
-    <ion-tab-button tab="home" href="/tabs/(home:home)">
+      <ion-icon name="flash"></ion-icon>
-      <ion-icon name="home"></ion-icon>
+      <ion-label>Tab One</ion-label>
-      <ion-label>Home</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="about" href="/tabs/(about:about)">
+    <ion-tab-button tab="tab2">
       <ion-icon name="images"></ion-icon>
       <ion-label>Gallery</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="contact" href="/tabs/(contact:contact)">
+    <ion-tab-button tab="tab3">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="send"></ion-icon>
-      <ion-label>Contact</ion-label>
+      <ion-label>Tab Three</ion-label>
     </ion-tab-button>
-
   </ion-tab-bar>
 
 </ion-tabs>

src/app/tabs/tabs.router.module.ts

@@ -2,40 +2,49 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { TabsPage } from './tabs.page';
-import { HomePage } from '../home/home.page';
-import { AboutPage } from '../about/about.page';
-import { ContactPage } from '../contact/contact.page';
 
 const routes: Routes = [
   {
     path: 'tabs',
     component: TabsPage,
     children: [
+      {
+        path: 'tab1',
+        children: [
+          {
+            path: '',
+            loadChildren: '../tab1/tab1.module#Tab1PageModule'
+          }
+        ]
+      },
+      {
+        path: 'tab2',
+        children: [
+          {
+            path: '',
+            loadChildren: '../tab2/tab2.module#Tab2PageModule'
+          }
+        ]
+      },
+      {
+        path: 'tab3',
+        children: [
+          {
+            path: '',
+            loadChildren: '../tab3/tab3.module#Tab3PageModule'
+          }
+        ]
+      },
       {
         path: '',
-        redirectTo: '/tabs/(home:home)',
+        redirectTo: '/tabs/tab1',
-        pathMatch: 'full',
+        pathMatch: 'full'
-      },
-      {
-        path: 'home',
-        outlet: 'home',
-        component: HomePage
-      },
-      {
-        path: 'about',
-        outlet: 'about',
-        component: AboutPage
-      },
-      {
-        path: 'contact',
-        outlet: 'contact',
-        component: ContactPage
       }
     ]
   },
   {
     path: '',
-    redirectTo: '/tabs/(home:home)',
+    redirectTo: '/tabs/tab1',
     pathMatch: 'full'
   }
 ];

src/assets/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

src/environments/environment.ts

@@ -1,15 +1,16 @@
-// The file contents for the current environment will overwrite these during build.
+// This file can be replaced during build by using the `fileReplacements` array.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of file replacements can be found in `angular.json`.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
+
 export const environment = {
   production: false
 };
 
 /*
- * In development mode, to ignore zone related error stack frames such as
+ * For easier debugging in development mode, you can import the following file
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- * import the following file, but please comment it out in production mode
+ *
- * because it will have performance impact when throw error
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
  */
 // import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Ionic App</title>
 
-    <base href="/" />
+<head>
+  <meta charset="utf-8" />
+  <title>Ionic App</title>
 
-    <meta
+  <base href="/" />
-      name="viewport"
-      content="viewport-fit=cover, 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" />
 
-    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+  <meta name="viewport" content="viewport-fit=cover, 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" />
+
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+
+  <!-- add to homescreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
 
-    <!-- add to homescreen for ios -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
 </html>

src/polyfills.ts

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+/** IE9, IE10, IE11, and older Chrome requires all of the following polyfills. **/
 // import 'core-js/es6/symbol';
 // import 'core-js/es6/object';
 // import 'core-js/es6/function';
@@ -57,18 +57,27 @@
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */

typings/cordova-typings.d.ts

@@ -1,5 +1,3 @@
 
 /// <reference path="../.vscode/typings/cordova-ionic/plugins/keyboard.d.ts"/>
-/// <reference path="../.vscode/typings/jquery/jquery.d.ts"/>
+/// <reference path="../.vscode/typings/jquery/jquery.d.ts"/>
-/// <reference path="..\.vscode\typings\cordova-ionic\plugins\keyboard.d.ts"/>
-/// <reference path="..\.vscode\typings\jquery\jquery.d.ts"/>