refactor(conference-app): begin process of updating to use angular router

packages/core/src/components/nav/nav.tsx

@@ -1332,7 +1332,7 @@ export function getTopTransaction(id: number) {
 }
 
 export function getDefaultTransition(config: Config) {
-  return config.get('mode') === 'md' ? buildMdTransition : buildIOSTransition;
+  return config.get('mode') === 'ios' ? buildIOSTransition : buildMdTransition;
 }
 
 let viewIds = VIEW_ID_START;
@@ -1382,6 +1382,7 @@ export function updateTab(nav: Nav, component: any, data: any, escapeHatch: Esca
         // basically, we should update the nav, and then swap the tabs
         return promise.then((navResult) => {
           return tabs.select(tab).then(() => {
+            app.setExternalNavPromise(null);
             return navResult;
           });
         });

packages/demos/conference-app/angular/package-lock.json

@@ -205,7 +205,7 @@
         "denodeify": "1.2.1",
         "ember-cli-string-utils": "1.1.0",
         "extract-text-webpack-plugin": "3.0.2",
-        "file-loader": "1.1.7",
+        "file-loader": "1.1.8",
         "fs-extra": "4.0.3",
         "glob": "7.1.2",
         "html-webpack-plugin": "2.30.1",
@@ -529,9 +529,9 @@
       }
     },
     "@ionic/core": {
-      "version": "0.0.3-0",
+      "version": "0.0.3-3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.3-0.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.3-3.tgz",
-      "integrity": "sha512-6iN0ybLvIYgkZM5R9CEhyYD3N+nvV360zSu2qTVCxWyPrCODebkRIYABIQp/RZcwSscniHXoM7wL3g9whbKsEA=="
+      "integrity": "sha512-qbMN7Bkp+UUIWSRYoi2ZSUK2LoD96rdDAGus7+Otzs7+qk3NYYov8l0Gh2wgYAL7rYZkYAY6MUMLplNwXqckNQ=="
     },
     "@ionic/storage": {
       "version": "2.1.3",
@@ -598,7 +598,7 @@
       "requires": {
         "rxjs": "5.5.6",
         "semver": "5.5.0",
-        "semver-intersect": "1.3.0"
+        "semver-intersect": "1.3.1"
       },
       "dependencies": {
         "semver": {
@@ -610,9 +610,9 @@
       }
     },
     "@stencil/core": {
-      "version": "0.6.3",
+      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.6.5.tgz",
-      "integrity": "sha512-aKN1ciTO8NMrnIsBfzc5Csg/IVBFsog0bCThtlQojZYFm3F0myA4vwsPhEjRm9wjF3ctTwusDk4M7uVLHLKhCA==",
+      "integrity": "sha512-pt9e7+VJK/W+A11GzVU1ljisO270t1klu6tvbe+WJZOoxGMCZjW9OOBNAP5dbSAewfP1dsBa3SDGI/IUS5Z6dA==",
       "requires": {
         "chokidar": "2.0.1",
         "jsdom": "11.5.1",
@@ -838,7 +838,7 @@
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
       "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
       "requires": {
-        "micromatch": "3.1.6",
+        "micromatch": "3.1.8",
         "normalize-path": "2.1.1"
       }
     },
@@ -1054,7 +1054,7 @@
       "dev": true,
       "requires": {
         "browserslist": "2.11.3",
-        "caniuse-lite": "1.0.30000809",
+        "caniuse-lite": "1.0.30000810",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "6.0.19",
@@ -1574,7 +1574,7 @@
       "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "1.0.30000809",
+        "caniuse-lite": "1.0.30000810",
         "electron-to-chromium": "1.3.33"
       }
     },
@@ -1704,9 +1704,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000809",
+      "version": "1.0.30000810",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000809.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000810.tgz",
-      "integrity": "sha512-tLn4flj2upmMsko3larTkQh21Vp9pylnNPUOhw5+mubL+67U5Fpm4UG5AutzGBc+gBIPSsPFHDynsiMWp5m46g==",
+      "integrity": "sha512-/0Q00Oie9C72P8zQHtFvzmkrMC3oOFUnMWjCy5F2+BE8lzICm91hQPhh0+XIsAFPKOe2Dh3pKgbRmU3EKxfldA==",
       "dev": true
     },
     "caseless": {
@@ -3266,7 +3266,7 @@
         "define-property": "0.2.5",
         "extend-shallow": "2.0.1",
         "posix-character-classes": "0.1.1",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
         "to-regex": "3.0.1"
       },
@@ -3411,7 +3411,7 @@
         "on-finished": "2.3.0",
         "parseurl": "1.3.2",
         "path-to-regexp": "0.1.7",
-        "proxy-addr": "2.0.2",
+        "proxy-addr": "2.0.3",
         "qs": "6.5.1",
         "range-parser": "1.2.0",
         "safe-buffer": "5.1.1",
@@ -3466,7 +3466,7 @@
         "expand-brackets": "2.1.4",
         "extend-shallow": "2.0.1",
         "fragment-cache": "0.2.1",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
         "to-regex": "3.0.1"
       },
@@ -3576,9 +3576,9 @@
       }
     },
     "file-loader": {
-      "version": "1.1.7",
+      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.8.tgz",
-      "integrity": "sha512-JNiSlopfWaZRMdC8swCz/aIizNe0VjrHHb6MipBhUvh5pTfoUPsrJLkYB4MYYlH+SdHbWR7AGokTe+GY5QmNBw==",
+      "integrity": "sha512-gVsHTw9n5Sp6U5vm5MmwMyKx4uOnlmDMwtWhXMdUmQJ7w3FgGaIjqPF2k4c8KZYhRd0Ltlt6mofRTv/NfqCLuA==",
       "dev": true,
       "requires": {
         "loader-utils": "1.1.0",
@@ -5535,9 +5535,9 @@
       "dev": true
     },
     "ipaddr.js": {
-      "version": "1.5.2",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz",
-      "integrity": "sha1-1LUFvemUaYfM8PxY2QEP+WB+P6A=",
+      "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=",
       "dev": true
     },
     "is": {
@@ -7243,9 +7243,9 @@
       "dev": true
     },
     "micromatch": {
-      "version": "3.1.6",
+      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.8.tgz",
-      "integrity": "sha512-6hezhKgmSIRZeSCiVB84GOmH1Ajvo8XgnaEq/uPQ/wv0g+MQlaVonSEru7VMDZXzRWFoclakpADfInbg/5FGjw==",
+      "integrity": "sha512-/XeuOQqYg+B5kwjDWekXseSwGS7CzE0w9Gjo4Cjkf/uFitNh47NrZHAY2vp/oS2YQVfebPIdbEIvgdy+kIcAog==",
       "requires": {
         "arr-diff": "4.0.0",
         "array-unique": "0.3.2",
@@ -7257,7 +7257,7 @@
         "kind-of": "6.0.2",
         "nanomatch": "1.2.9",
         "object.pick": "1.3.0",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
         "to-regex": "3.0.1"
       }
@@ -7457,7 +7457,7 @@
         "is-windows": "1.0.2",
         "kind-of": "6.0.2",
         "object.pick": "1.3.0",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
         "to-regex": "3.0.1"
       }
@@ -8706,13 +8706,13 @@
       }
     },
     "proxy-addr": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
-      "integrity": "sha1-ZXFQT0e7mI7IGAJT+F3X4UlSvew=",
+      "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==",
       "dev": true,
       "requires": {
         "forwarded": "0.1.2",
-        "ipaddr.js": "1.5.2"
+        "ipaddr.js": "1.6.0"
       }
     },
     "prr": {
@@ -9016,21 +9016,12 @@
       }
     },
     "regex-not": {
-      "version": "1.0.0",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha1-Qvg+OXcWIt+CawKvF2Ul1qXxV/k=",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
       "requires": {
-        "extend-shallow": "2.0.1"
+        "extend-shallow": "3.0.2",
-      },
+        "safe-regex": "1.1.0"
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "0.1.1"
-          }
-        }
       }
     },
     "regexpu-core": {
@@ -9224,6 +9215,11 @@
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
+    },
     "right-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
@@ -9449,6 +9445,14 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
       "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
     },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "requires": {
+        "ret": "0.1.15"
+      }
+    },
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
@@ -9605,9 +9609,9 @@
       }
     },
     "semver-intersect": {
-      "version": "1.3.0",
+      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/semver-intersect/-/semver-intersect-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver-intersect/-/semver-intersect-1.3.1.tgz",
-      "integrity": "sha512-923f1TGXGb2+OCkLvsmNPijmurMQxEMFOhC80N4NL8/Jo5rBKufHZ3sBtJJ7GNhh4RhdsB6+vj+6W68kmr43Lg==",
+      "integrity": "sha1-j6hKnhAovSOeRTDRo+GB5pjYhLo=",
       "dev": true,
       "requires": {
         "semver": "5.5.0"
@@ -10676,7 +10680,7 @@
       "requires": {
         "define-property": "0.2.5",
         "extend-shallow": "2.0.1",
-        "regex-not": "1.0.0"
+        "regex-not": "1.0.2"
       },
       "dependencies": {
         "define-property": {

packages/demos/conference-app/angular/src/app/about/about-popover.ts

@@ -1,7 +1,5 @@
 import { Component } from '@angular/core';
-
+import { App, PopoverController } from '@ionic/angular';
-import { PublicNav } from '@ionic/core';
-import { App } from '@ionic/angular';
 
 
 @Component({
@@ -27,15 +25,16 @@ import { App } from '@ionic/angular';
 })
 export class PopoverPage {
 
-  constructor(public app: App) { }
+  constructor(private app: App, private popoverController: PopoverController) {
+
+  }
 
   support() {
-    (this.app.getRootNavs()[0] as PublicNav).push('SupportPage');
+    (this.app.getRootNavs()[0]).push('SupportPage');
-    // this.viewCtrl.dismiss();
+    this.popoverController.dismiss();
   }
 
-  close(url: string) {
+  close(_url: string) {
-    window.open(url, '_blank');
+    this.popoverController.dismiss();
-    // this.viewCtrl.dismiss();
   }
 }

packages/demos/conference-app/angular/src/app/about/about-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AboutPage } from './about';
+
+const routes: Routes = [
+  { path: '', component: AboutPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AboutPageRoutingModule { }

packages/demos/conference-app/angular/src/app/about/about.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar color="primary">
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
       <ion-title>About</ion-title>
       <ion-buttons slot="end">

packages/demos/conference-app/angular/src/app/about/about.module.ts

@@ -0,0 +1,30 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
+
+import { AboutPage } from './about';
+import { PopoverPage } from './about-popover';
+import { AboutPageRoutingModule } from './about-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule.forRoot(),
+    IonicRouterModule,
+    AboutPageRoutingModule
+  ],
+  declarations: [
+    AboutPage,
+    PopoverPage
+  ],
+  entryComponents: [
+    PopoverPage
+  ],
+  bootstrap: [
+    AboutPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class AboutModule { }

packages/demos/conference-app/angular/src/app/about/about.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
 
-import { PopoverPage } from '../about-popover/about-popover';
+import { PopoverPage } from './about-popover';
 
 @Component({
   selector: 'page-about',

packages/demos/conference-app/angular/src/app/account/account-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AccountPage } from './account';
+
+const routes: Routes = [
+  { path: '', component: AccountPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountPageRoutingModule { }

packages/demos/conference-app/angular/src/app/account/account.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar color="primary">
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
       <ion-title>Account</ion-title>
     </ion-toolbar>

packages/demos/conference-app/angular/src/app/account/account.module.ts

@@ -0,0 +1,22 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { AccountPage } from './account';
+import { AccountPageRoutingModule } from './account-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule,
+
+    AccountPageRoutingModule
+  ],
+  declarations: [
+    AccountPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class AccountModule { }

packages/demos/conference-app/angular/src/app/account/account.ts

@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-
 import { AlertController, NavController } from '@ionic/angular';
 
-import { UserData } from '../../providers/user-data';
+import { UserData } from '../providers/user-data';
-
 
 @Component({
   selector: 'page-account',
@@ -60,7 +58,6 @@ export class AccountPage {
   }
 
   changePassword() {
-    console.log('Clicked to change password');
   }
 
   logout() {

packages/demos/conference-app/angular/src/app/app-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/app/tabs/(schedule:schedule)', pathMatch: 'full' },
+  { path: 'account', loadChildren: './account/account.module#AccountModule' },
+  { path: 'support', loadChildren: './support/support.module#SupportModule' },
+  { path: 'login', loadChildren: './login/login.module#LoginModule' },
+  { path: 'sign-up', loadChildren: './sign-up/sign-up.module#SignUpModule' },
+  { path: 'app', loadChildren: './tabs-page/tabs-page.module#TabsModule' },
+];
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

packages/demos/conference-app/angular/src/app/app.component.html

@@ -2,51 +2,11 @@
   <ion-split-pane>
 
     <ion-menu>
-        <ion-header>
+      <app-menu></app-menu>
-          <ion-toolbar color="primary">
-            <ion-title>Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-
-          <ion-list>
-            <ion-list-header>
-              Navigate
-            </ion-list-header>
-            <ion-item menuToggle (click)="openPage(p)" *ngFor="let p of appPages">
-              <ion-icon slot="start" [name]="p.icon" [color]="isActive(p)"></ion-icon>
-              <ion-label>
-                {{p.title}}
-              </ion-label>
-            </ion-item>
-          </ion-list>
-
-          <ion-list>
-            <ion-list-header>
-              Account
-            </ion-list-header>
-            <ion-item menuToggle *ngFor="let p of loggedOutPages" (click)="openPage(p)">
-              <ion-icon slot="start" [name]="p.icon" [color]="isActive(p)"></ion-icon>
-              <ion-label>
-                {{p.title}}
-              </ion-label>
-            </ion-item>
-          </ion-list>
-
-          <ion-list>
-            <ion-list-header>
-              Tutorial
-            </ion-list-header>
-            <ion-item menuToggle (click)="openTutorial()">
-              <ion-icon slot="start" name="hammer"></ion-icon>
-              <ion-label>Show Tutorial</ion-label>
-            </ion-item>
-          </ion-list>
-
-        </ion-content>
     </ion-menu>
 
-    <ion-nav #nav #content swipeBackEnabled="false" main name="app"></ion-nav>
+
+    <ion-nav #nav #content swipeBackEnabled="false" main></ion-nav>
 
   </ion-split-pane>
 

packages/demos/conference-app/angular/src/app/app.component.ts

@@ -11,19 +11,8 @@ import {
 } from '@ionic/angular';
 import { Storage } from '@ionic/storage';
 
-import { AboutPage } from '../pages/about/about';
+import { ConferenceData } from './providers/conference-data';
-import { AccountPage } from '../pages/account/account';
+import { UserData } from './providers/user-data';
-import { LoginPage } from '../pages/login/login';
-import { MapPage } from '../pages/map/map';
-import { SignupPage } from '../pages/signup/signup';
-import { TabsPage } from '../pages/tabs-page/tabs-page';
-import { TutorialPage } from '../pages/tutorial/tutorial';
-import { SchedulePage } from '../pages/schedule/schedule';
-import { SpeakerListPage } from '../pages/speaker-list/speaker-list';
-import { SupportPage } from '../pages/support/support';
-
-import { ConferenceData } from '../providers/conference-data';
-import { UserData } from '../providers/user-data';
 
 @Component({
   selector: 'app-root',
@@ -39,22 +28,25 @@ export class AppComponent implements OnInit {
   // the left menu only works after login
   // the login page disables the left menu
   appPages: PageInterface[] = [
-    { title: 'Schedule', name: 'TabsPage', component: TabsPage, tabComponent: SchedulePage, index: 0, icon: 'calendar', color: null },
+    /*{ title: 'Schedule', name: 'TabsPage', component: TabsPage, tabComponent: SchedulePage, index: 0, icon: 'calendar', color: null },
     { title: 'Speakers', name: 'TabsPage', component: TabsPage, tabComponent: SpeakerListPage, index: 1, icon: 'contacts', color: null },
     { title: 'Map', name: 'TabsPage', component: TabsPage, tabComponent: MapPage, index: 2, icon: 'map', color: null },
     { title: 'About', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage, index: 3, icon: 'information-circle', color: null }
+    */
   ];
 
   loggedInPages: PageInterface[] = [
-    { title: 'Account', name: 'AccountPage', component: AccountPage, icon: 'person', color: null },
+    /*{ title: 'Account', name: 'AccountPage', component: AccountPage, icon: 'person', color: null },
     { title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help', color: null },
     { title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true, color: null }
+    */
   ];
 
   loggedOutPages: PageInterface[] = [
-    { title: 'Login', name: 'LoginPage', component: LoginPage, icon: 'log-in', color: null },
+    /*{ title: 'Login', name: 'LoginPage', component: LoginPage, icon: 'log-in', color: null },
     { title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help', color: null },
     { title: 'Signup', name: 'SignupPage', component: SignupPage, icon: 'person-add', color: null }
+    */
   ];
 
   constructor(
@@ -70,26 +62,18 @@ export class AppComponent implements OnInit {
     this.storage.get('hasSeenTutorial')
       .then((hasSeenTutorial) => {
         if (hasSeenTutorial) {
-          this.rootPage = TabsPage;
+          // this.rootPage = TabsPage;
         } else {
-          this.rootPage = TutorialPage;
+          // this.rootPage = TutorialPage;
         }
         getNav(this.navRef).then((navElement) => {
-          navElement.setRoot(this.rootPage);
+          // navElement.setRoot(this.rootPage);
         });
       });
 
     // load the conference data
     this.confData.load();
 
-    // decide which menu items should be hidden by current login status stored in local storage
-    this.userData.hasLoggedIn().then((hasLoggedIn) => {
-      this.enableMenu(hasLoggedIn === true);
-    });
-    this.enableMenu(true);
-
-    this.listenToLoginEvents();
-
     return getNav(this.navRef).then(() => {
       this.appPages = this.appPages.concat([]);
     });
@@ -122,7 +106,7 @@ export class AppComponent implements OnInit {
     }
 
     return getNav(this.navRef).then(() => {
-      return nav.setRoot(page.component, params);
+      // return nav.setRoot(page.component, params);
     }).then(() => {
       if (page.logsOut === true) {
         // Give the menu time to close before changing to logged out
@@ -133,34 +117,15 @@ export class AppComponent implements OnInit {
 
   openTutorial() {
     return getNav(this.navRef).then((navElement) => {
-      navElement.setRoot(TutorialPage);
+      // navElement.setRoot(TutorialPage);
     });
   }
 
-  listenToLoginEvents() {
-    this.events.subscribe('user:login', () => {
-      this.enableMenu(true);
-    });
-
-    this.events.subscribe('user:signup', () => {
-      this.enableMenu(true);
-    });
-
-    this.events.subscribe('user:logout', () => {
-      this.enableMenu(false);
-    });
-  }
-
-  enableMenu(loggedIn: boolean) {
-    this.menu.enable(loggedIn, 'loggedInMenu');
-    this.menu.enable(!loggedIn, 'loggedOutMenu');
-  }
-
   isActive(page: PageInterface) {
     if (!nav) {
       return;
     }
-    if (nav.root === TabsPage) {
+    /*if (nav.root === TabsPage) {
       const selectedTab = nav.element.querySelector('ion-tab-button.selected-tab');
       const childNav = selectedTab.querySelector('ion-nav');
       if ( childNav.root === page.component) {
@@ -173,6 +138,7 @@ export class AppComponent implements OnInit {
       }
       page.color = '';
     }
+    */
   }
 }
 

packages/demos/conference-app/angular/src/app/app.module.ts

@@ -3,71 +3,30 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
 import { IonicStorageModule } from '@ionic/storage';
 import { InAppBrowser } from '@ionic-native/in-app-browser';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { Menu } from './menu/menu';
 
-import { AboutPage } from '../pages/about/about';
+import { ConferenceData } from './providers/conference-data';
-import { PopoverPage } from '../pages/about-popover/about-popover';
+import { UserData } from './providers/user-data';
-import { AccountPage } from '../pages/account/account';
-import { LoginPage } from '../pages/login/login';
-import { MapPage } from '../pages/map/map';
-import { SchedulePage } from '../pages/schedule/schedule';
-import { ScheduleFilterPage } from '../pages/schedule-filter/schedule-filter';
-import { SessionDetailPage } from '../pages/session-detail/session-detail';
-import { SignupPage } from '../pages/signup/signup';
-import { SpeakerDetailPage } from '../pages/speaker-detail/speaker-detail';
-import { SpeakerListPage } from '../pages/speaker-list/speaker-list';
-import { SupportPage } from '../pages/support/support';
-import { TabsPage } from '../pages/tabs-page/tabs-page';
-import { TutorialPage } from '../pages/tutorial/tutorial';
-
-import { ConferenceData } from '../providers/conference-data';
-import { UserData } from '../providers/user-data';
 
 @NgModule({
   declarations: [
-    AboutPage,
-    AccountPage,
     AppComponent,
-    LoginPage,
+    Menu
-    MapPage,
-    PopoverPage,
-    SchedulePage,
-    ScheduleFilterPage,
-    SessionDetailPage,
-    SignupPage,
-    SpeakerDetailPage,
-    SpeakerListPage,
-    SupportPage,
-    TabsPage,
-    TutorialPage
-  ],
-  entryComponents: [
-    AboutPage,
-    AccountPage,
-    LoginPage,
-    MapPage,
-    PopoverPage,
-    SchedulePage,
-    ScheduleFilterPage,
-    SessionDetailPage,
-    SignupPage,
-    SpeakerDetailPage,
-    SpeakerListPage,
-    SupportPage,
-    TabsPage,
-    TutorialPage
   ],
   imports: [
+    AppRoutingModule,
     BrowserModule,
-    FormsModule,
     HttpModule,
     IonicAngularModule.forRoot(),
-    IonicStorageModule.forRoot()
+    IonicStorageModule.forRoot(),
+    IonicRouterModule.forRoot()
   ],
   providers: [
     ConferenceData,

packages/demos/conference-app/angular/src/app/interfaces/user-options.ts

@@ -0,0 +1,5 @@
+
+export interface UserOptions {
+  username: string;
+  password: string;
+}

packages/demos/conference-app/angular/src/app/login/login-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginPage } from './login';
+
+const routes: Routes = [
+  { path: '', component: LoginPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LoginPageRoutingModule { }

packages/demos/conference-app/angular/src/app/login/login.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
 
       <ion-title>Login</ion-title>
@@ -40,10 +42,10 @@
 
       <ion-row responsive-sm>
         <ion-col>
-          <button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
+          <ion-button (click)="onLogin(loginForm)" type="submit" block>Login</ion-button>
         </ion-col>
         <ion-col>
-          <button ion-button (click)="onSignup()" color="light" block>Signup</button>
+          <ion-button (click)="onSignup()" color="light" block>Signup</ion-button>
         </ion-col>
       </ion-row>
     </form>

packages/demos/conference-app/angular/src/app/login/login.module.ts

@@ -0,0 +1,24 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { LoginPage } from './login';
+import { LoginPageRoutingModule } from './login-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicAngularModule,
+
+    LoginPageRoutingModule
+  ],
+  declarations: [
+    LoginPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class LoginModule { }

packages/demos/conference-app/angular/src/app/login/login.ts

@@ -3,12 +3,8 @@ import { NgForm } from '@angular/forms';
 
 import { NavController } from '@ionic/angular';
 
-import { UserData } from '../../providers/user-data';
+import { UserData } from '../providers/user-data';
-
+import { UserOptions } from '../interfaces/user-options';
-import { UserOptions } from '../../interfaces/user-options';
-
-import { TabsPage } from '../tabs-page/tabs-page';
-import { SignupPage } from '../signup/signup';
 
 
 @Component({
@@ -27,11 +23,11 @@ export class LoginPage {
 
     if (form.valid) {
       this.userData.login(this.login.username);
-      this.navCtrl.push(TabsPage);
+      // this.navCtrl.push(TabsPage);
     }
   }
 
   onSignup() {
-    this.navCtrl.push(SignupPage);
+    // this.navCtrl.push(SignUpPage);
   }
 }

packages/demos/conference-app/angular/src/app/map/map-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MapPage } from './map';
+
+const routes: Routes = [
+  { path: '', component: MapPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MapPageRoutingModule { }

packages/demos/conference-app/angular/src/app/map/map.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar color="primary">
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
       <ion-title>Map</ion-title>
     </ion-toolbar>

packages/demos/conference-app/angular/src/app/map/map.module.ts

@@ -0,0 +1,22 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
+
+import { MapPage } from './map';
+import { MapPageRoutingModule } from './map-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule,
+    IonicRouterModule,
+    MapPageRoutingModule
+  ],
+  declarations: [
+    MapPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class MapModule { }

packages/demos/conference-app/angular/src/app/map/map.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, ViewEncapsulation, ElementRef } from '@angular/core';
 
-import { ConferenceData } from '../../providers/conference-data';
+import { ConferenceData } from '../providers/conference-data';
 
 declare var google: any;
 
@@ -14,6 +14,7 @@ export class MapPage {
 
   @ViewChild('mapCanvas') mapElement: ElementRef;
   constructor(public confData: ConferenceData) {
+    console.log('map component constructor');
   }
 
   ionViewDidEnter() {

packages/demos/conference-app/angular/src/app/menu/menu.html

@@ -0,0 +1,130 @@
+<ion-page>
+    <ion-header>
+        <ion-toolbar color="primary">
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+
+        <ion-list>
+          <ion-list-header>
+            Navigate
+          </ion-list-header>
+
+          <ion-item (click)="selectTab(0)">
+            <ion-icon slot="start" name="calendar"></ion-icon>
+            <ion-label>
+              Schedule
+            </ion-label>
+          </ion-item>
+
+          <!-- <ion-menu-toggle> -->
+            <ion-item (click)="selectTab(1)">
+              <ion-icon slot="start" name="contacts"></ion-icon>
+              <ion-label>
+                Speakers
+              </ion-label>
+            </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+          <!-- <ion-menu-toggle> -->
+            <ion-item (click)="selectTab(2)">
+              <ion-icon slot="start" name="map"></ion-icon>
+              <ion-label>
+                Map
+              </ion-label>
+            </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+          <!-- <ion-menu-toggle> -->
+            <ion-item (click)="selectTab(3)">
+              <ion-icon slot="start" name="information-circle"></ion-icon>
+              <ion-label>
+                About
+              </ion-label>
+            </ion-item>
+          <!-- </ion-menu-toggle> -->
+        </ion-list>
+
+        <ion-list *ngIf="loggedIn">
+          <ion-list-header>
+            Account
+          </ion-list-header>
+
+          <!-- <ion-menu-toggle> -->
+          <ion-item (click)="openAccount()">
+            <ion-icon slot="start" name="person"></ion-icon>
+            <ion-label>
+              Account
+            </ion-label>
+          </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+          <!-- <ion-menu-toggle> -->
+          <ion-item (click)="openSupport()">
+            <ion-icon slot="start" name="help"></ion-icon>
+            <ion-label>
+              Support
+            </ion-label>
+          </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+          <!-- <ion-menu-toggle> -->
+          <ion-item (click)="logout()">
+            <ion-icon slot="start" name="log-out"></ion-icon>
+            <ion-label>
+              Logout
+            </ion-label>
+          </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+        </ion-list>
+
+        <ion-list *ngIf="!loggedIn">
+          <ion-list-header>
+            Account
+          </ion-list-header>
+
+          <!-- <ion-menu-toggle> -->
+          <ion-item (click)="login()">
+            <ion-icon slot="start" name="log-in"></ion-icon>
+            <ion-label>
+              Login
+            </ion-label>
+          </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+          <!-- <ion-menu-toggle> -->
+          <ion-item (click)="openSupport()">
+            <ion-icon slot="start" name="help"></ion-icon>
+            <ion-label>
+              Support
+            </ion-label>
+          </ion-item>
+          <!-- </ion-menu-toggle> -->
+
+          <!-- <ion-menu-toggle> -->
+          <ion-item (click)="signup()">
+            <ion-icon slot="start" name="person-add"></ion-icon>
+            <ion-label>
+              Sign-up
+            </ion-label>
+          </ion-item>
+          <!-- </ion-menu-toggle> -->
+        </ion-list>
+
+        <ion-list>
+            <ion-list-header>
+              Tutorial
+            </ion-list-header>
+            <!-- <ion-menu-toggle> -->
+              <ion-item (click)="openTutorial()">
+                <ion-icon slot="start" name="hammer"></ion-icon>
+                <ion-label>Show Tutorial</ion-label>
+              </ion-item>
+            <!-- </ion-menu-toggle> -->
+          </ion-list>
+
+
+      </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/app/menu/menu.module.ts

@@ -0,0 +1,19 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { Menu } from './menu';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule.forRoot(),
+  ],
+  declarations: [
+    Menu,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class MenuModule { }

packages/demos/conference-app/angular/src/app/menu/menu.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Events } from '@ionic/angular';
+
+import { UserData } from '../providers/user-data';
+
+@Component({
+  templateUrl: 'menu.html',
+  selector: 'app-menu'
+})
+export class Menu implements OnInit {
+
+  loggedIn = false;
+  constructor(private router: Router,
+              private events: Events,
+              private userData: UserData) {
+
+  }
+
+  ngOnInit() {
+    this.checkLoginStatus();
+    this.listenForLoginEvents();
+    setInterval(() => {
+      this.loggedIn = !this.loggedIn;
+    }, 2000);
+  }
+
+  checkLoginStatus() {
+    return this.userData.isLoggedIn().then((loggedIn) => {
+      this.loggedIn = loggedIn;
+      console.log('this.loggedIn: ', this.loggedIn);
+    });
+  }
+
+  listenForLoginEvents() {
+    this.events.subscribe('user:login', () => {
+      this.loggedIn = true;
+    });
+
+    this.events.subscribe('user:signup', () => {
+      this.loggedIn = true;
+    });
+
+    this.events.subscribe('user:logout', () => {
+      this.loggedIn = false;
+    });
+  }
+
+  selectTab(index: number) {
+    const tabs = document.querySelector('ion-tabs');
+    if (tabs) {
+      return tabs.componentOnReady().then(() => {
+        return tabs.select(index);
+      });
+    }
+  }
+
+  login() {
+    this.router.navigateByUrl('/login');
+  }
+
+  signup() {
+    this.router.navigateByUrl('/sign-up');
+  }
+
+  openSupport() {
+    this.router.navigateByUrl('/support');
+  }
+
+  openTutorial() {
+    alert('todo tutorial');
+  }
+}

packages/demos/conference-app/angular/src/app/providers/user-data.ts

@@ -62,7 +62,7 @@ export class UserData {
     });
   }
 
-  hasLoggedIn(): Promise<boolean> {
+  isLoggedIn(): Promise<boolean> {
     return this.storage.get(this.HAS_LOGGED_IN).then((value) => {
       return value === true;
     });

packages/demos/conference-app/angular/src/app/schedule/schedule-filter.ts

@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-
 import { ModalController, NavParams } from '@ionic/angular';
 
-import { ConferenceData } from '../../providers/conference-data';
+import { ConferenceData } from '../providers/conference-data';
-
 
 @Component({
   selector: 'page-schedule-filter',
@@ -17,9 +15,10 @@ export class ScheduleFilterPage {
     public modalController: ModalController,
     public navParams: NavParams,
   ) {
-    // passed in array of track names that should be excluded (unchecked)
+  }
-    const excludedTrackNames = this.navParams.data;
 
+  ngAfterViewInit() {
+    const excludedTrackNames = this.navParams.data.excludedTracks;
     this.confData.getTracks().subscribe((trackNames: string[]) => {
 
       trackNames.forEach(trackName => {
@@ -28,6 +27,7 @@ export class ScheduleFilterPage {
           isChecked: (excludedTrackNames.indexOf(trackName) === -1)
         });
       });
+      console.log('this.tracks: ', this.tracks);
 
     });
   }

packages/demos/conference-app/angular/src/app/schedule/schedule-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SchedulePage } from './schedule';
+
+const routes: Routes = [
+  { path: '', component: SchedulePage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SchedulePageRoutingModule { }

packages/demos/conference-app/angular/src/app/schedule/schedule.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar color="primary">
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
 
       <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="light">

packages/demos/conference-app/angular/src/app/schedule/schedule.module.ts

@@ -0,0 +1,27 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
+
+import { SchedulePage } from './schedule';
+import { ScheduleFilterPage } from './schedule-filter';
+import { SchedulePageRoutingModule } from './schedule-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule.forRoot(),
+    IonicRouterModule,
+    SchedulePageRoutingModule
+  ],
+  declarations: [
+    SchedulePage,
+    ScheduleFilterPage
+  ],
+  entryComponents: [
+    ScheduleFilterPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class ScheduleModule { }

packages/demos/conference-app/angular/src/app/schedule/schedule.ts

@@ -1,5 +1,5 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ElementRef } from '@angular/core';
-
+import { Router } from '@angular/router';
 import {
   AlertController,
   App,
@@ -9,20 +9,9 @@ import {
   ToastController
 } from '@ionic/angular';
 
-import { Fab, ItemSliding, List, /*Refresher*/ } from '@ionic/core';
+import { ScheduleFilterPage } from './schedule-filter';
-
+import { ConferenceData } from '../providers/conference-data';
-/*
+import { UserData } from '../providers/user-data';
-  To learn how to use third party libs in an
-  Ionic app check out our docs here: http://ionicframework.com/docs/v2/resources/third-party-libs/
-*/
-// import moment from 'moment';
-
-import { ConferenceData } from '../../providers/conference-data';
-import { UserData } from '../../providers/user-data';
-
-import { SessionDetailPage } from '../session-detail/session-detail';
-import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
-
 
 @Component({
   selector: 'page-schedule',
@@ -34,7 +23,7 @@ export class SchedulePage {
   // @ViewChild('scheduleList') gets a reference to the list
   // with the variable #scheduleList, `read: List` tells it to return
   // the List and not a reference to the element
-  @ViewChild('scheduleList', { read: List }) scheduleList: List;
+  @ViewChild('scheduleList', { read: ElementRef }) scheduleList: ElementRef;
 
   dayIndex = 0;
   queryText = '';
@@ -53,6 +42,7 @@ export class SchedulePage {
     public toastCtrl: ToastController,
     public confData: ConferenceData,
     public user: UserData,
+    private router: Router
   ) {}
 
   ionViewDidEnter() {
@@ -75,7 +65,7 @@ export class SchedulePage {
   presentFilter() {
     const modal = this.modalCtrl.create({
       component: ScheduleFilterPage,
-      data: this.excludeTracks
+      data: { excludedTracks: this.excludeTracks }
     });
     modal.present();
 
@@ -91,11 +81,10 @@ export class SchedulePage {
   goToSessionDetail(sessionData: any) {
     // go to the session detail page
     // and pass in the session data
-
+    this.router.navigateByUrl(`app/tabs/(schedule:session/${sessionData.id})`);
-    this.navCtrl.push(SessionDetailPage, { sessionId: sessionData.id, name: sessionData.name });
   }
 
-  addFavorite(slidingItem: ItemSliding, sessionData: any) {
+  addFavorite(slidingItem: HTMLIonItemSlidingElement, sessionData: any) {
 
     if (this.user.hasFavorite(sessionData.name)) {
       // woops, they already favorited it! What shall we do!?
@@ -122,7 +111,7 @@ export class SchedulePage {
 
   }
 
-  removeFavorite(slidingItem: ItemSliding, sessionData: any, title: string) {
+  removeFavorite(slidingItem: HTMLIonItemSlidingElement, sessionData: any, title: string) {
     const alert = this.alertCtrl.create({
       title: title,
       message: 'Would you like to remove this session from your favorites?',
@@ -152,7 +141,7 @@ export class SchedulePage {
     alert.present();
   }
 
-  openSocial(network: string, fab: Fab) {
+  openSocial(network: string, fab: HTMLIonFabElement) {
     const loading = this.loadingCtrl.create({
       content: `Posting to ${network}`,
       duration: (Math.random() * 1000) + 500

packages/demos/conference-app/angular/src/app/session-detail/session-detail-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SessionDetailPage } from './session-detail';
+
+const routes: Routes = [
+  { path: '', component: SessionDetailPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SessionDetailPageRoutingModule { }

packages/demos/conference-app/angular/src/app/session-detail/session-detail.html

@@ -1,7 +1,15 @@
 <ion-page>
   <ion-header>
     <ion-toolbar color="primary">
-      <ion-title *ngIf="session">{{session.name}}</ion-title>
+      <ion-buttons slot="start">
+        <ion-menu-toggle>
+          <ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
+        <ion-back-button text="Schedule"></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{session?.name}}</ion-title>
     </ion-toolbar>
   </ion-header>
 

packages/demos/conference-app/angular/src/app/session-detail/session-detail.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { NavParams } from '@ionic/angular';
 
-import { ConferenceData } from '../../providers/conference-data';
+import { ConferenceData } from '../providers/conference-data';
 
 @Component({
   selector: 'page-session-detail',

packages/demos/conference-app/angular/src/app/session-detail/session.module.ts

@@ -0,0 +1,19 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SessionDetailPage } from './session-detail';
+import { SessionDetailPageRoutingModule } from './session-detail-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SessionDetailPageRoutingModule
+  ],
+  declarations: [
+    SessionDetailPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class SessionDetailModule { }

packages/demos/conference-app/angular/src/app/sign-up/sign-up-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SignUpPage } from './sign-up';
+
+const routes: Routes = [
+  { path: '', component: SignUpPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SignUpPageRoutingModule { }

packages/demos/conference-app/angular/src/app/sign-up/sign-up.html

@@ -2,9 +2,13 @@
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-menu-toggle>
-        </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-menu-toggle>
+        </ion-menu-toggle>
       </ion-buttons>
       <ion-title>Signup</ion-title>
     </ion-toolbar>

packages/demos/conference-app/angular/src/app/sign-up/sign-up.module.ts

@@ -0,0 +1,24 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { SignUpPage } from './sign-up';
+import { SignUpPageRoutingModule } from './sign-up-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicAngularModule,
+
+    SignUpPageRoutingModule
+  ],
+  declarations: [
+    SignUpPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class SignUpModule { }

packages/demos/conference-app/angular/src/app/sign-up/sign-up.ts

@@ -3,19 +3,17 @@ import { NgForm } from '@angular/forms';
 
 import { NavController } from '@ionic/angular';
 
-import { UserData } from '../../providers/user-data';
+import { UserData } from '../providers/user-data';
 
-import { UserOptions } from '../../interfaces/user-options';
+import { UserOptions } from '../interfaces/user-options';
-
-import { TabsPage } from '../tabs-page/tabs-page';
 
 
 @Component({
   selector: 'page-user',
-  templateUrl: 'signup.html',
+  templateUrl: 'sign-up.html',
-  styleUrls: ['./signup.scss']
+  styleUrls: ['./sign-up.scss']
 })
-export class SignupPage {
+export class SignUpPage {
   signup: UserOptions = { username: '', password: '' };
   submitted = false;
 
@@ -26,7 +24,7 @@ export class SignupPage {
 
     if (form.valid) {
       this.userData.signup(this.signup.username);
-      this.navCtrl.push(TabsPage);
+      // this.navCtrl.push(TabsPage);
     }
   }
 }

packages/demos/conference-app/angular/src/app/speaker-detail/speaker-detail-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SpeakerDetailPage } from './speaker-detail';
+
+const routes: Routes = [
+  { path: '', component: SpeakerDetailPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SpeakerDetailPageRoutingModule { }

packages/demos/conference-app/angular/src/app/speaker-detail/speaker-detail.html

@@ -1,6 +1,9 @@
 <ion-page>
   <ion-header>
     <ion-toolbar color="primary">
+      <ion-buttons slot="start">
+        <ion-back-button text="Speakers"></ion-back-button>
+      </ion-buttons>
       <ion-title>{{speaker?.name}}</ion-title>
     </ion-toolbar>
   </ion-header>

packages/demos/conference-app/angular/src/app/speaker-detail/speaker-detail.module.ts

@@ -0,0 +1,19 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SpeakerDetailPage } from './speaker-detail';
+import { SpeakerDetailPageRoutingModule } from './speaker-detail-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SpeakerDetailPageRoutingModule
+  ],
+  declarations: [
+    SpeakerDetailPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class SpeakerDetailModule { }

packages/demos/conference-app/angular/src/app/speaker-detail/speaker-detail.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from '@ionic/angular';
 
-import { ConferenceData } from '../../providers/conference-data';
+import { ConferenceData } from '../providers/conference-data';
 
 @Component({
   selector: 'page-speaker-detail',

packages/demos/conference-app/angular/src/app/speaker-list/speaker-list-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SpeakerListPage } from './speaker-list';
+
+const routes: Routes = [
+  { path: '', component: SpeakerListPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SpeakerListPageRoutingModule { }

packages/demos/conference-app/angular/src/app/speaker-list/speaker-list.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar color="primary">
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
       <ion-title>Speakers</ion-title>
     </ion-toolbar>

packages/demos/conference-app/angular/src/app/speaker-list/speaker-list.module.ts

@@ -0,0 +1,22 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule, IonicRouterModule} from '@ionic/angular';
+
+import { SpeakerListPage } from './speaker-list';
+import { SpeakerListPageRoutingModule } from './speaker-list-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule,
+    IonicRouterModule,
+    SpeakerListPageRoutingModule
+  ],
+  declarations: [
+    SpeakerListPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class SpeakerListModule { }

packages/demos/conference-app/angular/src/app/speaker-list/speaker-list.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-
+import { Router } from '@angular/router';
 import {
   ActionSheetController,
   NavController
@@ -8,10 +8,7 @@ import {
 
 import { InAppBrowser } from '@ionic-native/in-app-browser';
 
-import { ConferenceData } from '../../providers/conference-data';
+import { ConferenceData } from '../providers/conference-data';
-
-import { SessionDetailPage } from '../session-detail/session-detail';
-import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
 
 @Component({
   selector: 'page-speaker-list',
@@ -23,10 +20,11 @@ export class SpeakerListPage {
   speakers: any[] = [];
 
   constructor(
-    public actionSheetCtrl: ActionSheetController,
+    private actionSheetCtrl: ActionSheetController,
-    public navCtrl: NavController,
+    private navCtrl: NavController,
-    public confData: ConferenceData,
+    private confData: ConferenceData,
-    public inAppBrowser: InAppBrowser
+    private inAppBrowser: InAppBrowser,
+    private router: Router
   ) {}
 
   ionViewDidEnter() {
@@ -36,11 +34,11 @@ export class SpeakerListPage {
   }
 
   goToSessionDetail(session: any) {
-    this.navCtrl.push(SessionDetailPage, { sessionId: session.id });
+    this.router.navigateByUrl(`app/tabs/(schedule:session/${session.id})`);
   }
 
   goToSpeakerDetail(speaker: any) {
-    this.navCtrl.push(SpeakerDetailPage, { speakerId: speaker.id });
+    this.router.navigateByUrl(`app/tabs/(speakers:speaker-details/${speaker.id})`);
   }
 
   goToSpeakerTwitter(speaker: any) {

packages/demos/conference-app/angular/src/app/support/support-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SupportPage } from './support';
+
+const routes: Routes = [
+  { path: '', component: SupportPage}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SupportPageRoutingModule { }

packages/demos/conference-app/angular/src/app/support/support.html

@@ -2,9 +2,11 @@
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-button menuToggle>
+        <ion-menu-toggle>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
+          <ion-button>
-        </ion-button>
+            <ion-icon slot="icon-only" name="menu"></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
       </ion-buttons>
       <ion-title>Support</ion-title>
     </ion-toolbar>

packages/demos/conference-app/angular/src/app/support/support.module.ts

@@ -0,0 +1,22 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
+import { SupportPage } from './support';
+import { SupportPageRoutingModule } from './support-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicAngularModule,
+    SupportPageRoutingModule
+  ],
+  declarations: [
+    SupportPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class SupportModule { }

packages/demos/conference-app/angular/src/app/support/support.ts

@@ -15,7 +15,6 @@ export class SupportPage {
   supportMessage: string;
 
   constructor(
-    public navCtrl: NavController,
     public alertCtrl: AlertController,
     public toastCtrl: ToastController
   ) {

packages/demos/conference-app/angular/src/app/tabs-page/tabs-page-routing.module.ts

@@ -0,0 +1,63 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TabsPage } from './tabs-page';
+
+import { AboutPage } from '../about/about';
+import { MapPage } from '../map/map';
+import { SchedulePage } from '../schedule/schedule';
+import { SessionDetailPage } from '../session-detail/session-detail';
+import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
+import { SpeakerListPage } from '../speaker-list/speaker-list';
+
+
+const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      // tab one
+      {
+        path: 'schedule',
+        component: SchedulePage,
+        outlet: 'schedule'
+      },
+      {
+        path: 'session/:sessionId',
+        component: SessionDetailPage,
+        outlet: 'schedule'
+      },
+      // tab two
+      {
+        path: 'speakers',
+        component: SpeakerListPage,
+        outlet: 'speakers'
+      },
+
+      {
+        path: 'speaker-details/:speakerId',
+        component: SpeakerDetailPage,
+        outlet: 'speakers'
+      },
+      // tab three
+      {
+        path: 'map',
+        component: MapPage,
+        outlet: 'map'
+      },
+
+      // tab four
+      {
+        path: 'about',
+        component: AboutPage,
+        outlet: 'about'
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TabsPageRoutingModule { }

packages/demos/conference-app/angular/src/app/tabs-page/tabs-page.html

@@ -0,0 +1,16 @@
+<ion-page>
+  <ion-tabs>
+    <ion-tab title="Schedule" icon="calendar">
+      <ion-nav name="schedule" lazy="true" root="/app/tabs/(schedule:schedule)"></ion-nav>
+    </ion-tab>
+    <ion-tab title="Speakers" icon="contacts">
+      <ion-nav name="speakers" lazy="true" root="/app/tabs/(speakers:speakers)"></ion-nav>
+    </ion-tab>
+    <ion-tab title="Map" icon="map">
+      <ion-nav name="map" lazy="true" root="/app/tabs/(map:map)"></ion-nav>
+    </ion-tab>
+    <ion-tab title="About" icon="information-circle">
+        <ion-nav name="about" lazy="true" root="/app/tabs/(about:about)"></ion-nav>
+    </ion-tab>
+  </ion-tabs>
+</ion-page>

packages/demos/conference-app/angular/src/app/tabs-page/tabs-page.module.ts

@@ -0,0 +1,35 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
+
+import { TabsPage } from './tabs-page';
+import { TabsPageRoutingModule } from './tabs-page-routing.module';
+
+import { AboutModule } from '../about/about.module';
+import { MapModule } from '../map/map.module';
+import { ScheduleModule } from '../schedule/schedule.module';
+import { SessionDetailModule } from '../session-detail/session.module';
+import { SpeakerDetailModule } from '../speaker-detail/speaker-detail.module';
+import { SpeakerListModule } from '../speaker-list/speaker-list.module';
+
+@NgModule({
+  imports: [
+    AboutModule,
+    CommonModule,
+    IonicAngularModule,
+    IonicRouterModule,
+    MapModule,
+    ScheduleModule,
+    SessionDetailModule,
+    SpeakerDetailModule,
+    SpeakerListModule,
+    TabsPageRoutingModule
+  ],
+  declarations: [
+    TabsPage,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class TabsModule { }

packages/demos/conference-app/angular/src/app/tabs-page/tabs-page.ts

@@ -2,20 +2,12 @@ import { Component } from '@angular/core';
 
 import { NavParams } from '@ionic/angular';
 
-import { AboutPage } from '../about/about';
-import { MapPage } from '../map/map';
-import { SchedulePage } from '../schedule/schedule';
-import { SpeakerListPage } from '../speaker-list/speaker-list';
-
 @Component({
   templateUrl: 'tabs-page.html'
 })
 export class TabsPage {
   // set the root pages for each tab
-  tab1Root: any = SchedulePage;
+
-  tab2Root: any = SpeakerListPage;
-  tab3Root: any = MapPage;
-  tab4Root: any = AboutPage;
   mySelectedIndex: number;
 
   constructor(navParams: NavParams) {

packages/demos/conference-app/angular/src/app/tutorial/tutorial.module.ts

@@ -0,0 +1,22 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { TutorialPage } from './tutorial';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule,
+  ],
+  declarations: [
+    TutorialPage,
+  ],
+  entryComponents: [
+    TutorialPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class TutorialModule { }

packages/demos/conference-app/angular/src/app/tutorial/tutorial.ts

@@ -5,11 +5,8 @@ import {
 } from '@angular/core';
 
 import { MenuController, NavController } from '@ionic/angular';
-
 import { Storage } from '@ionic/storage';
 
-import { TabsPage } from '../tabs-page/tabs-page';
-
 @Component({
   selector: 'page-tutorial',
   templateUrl: 'tutorial.html'
@@ -27,9 +24,9 @@ export class TutorialPage {
   ) { }
 
   startApp() {
-    this.navCtrl.push(TabsPage).then(() => {
+    // this.navCtrl.push(TabsPage).then(() => {
-      this.storage.set('hasSeenTutorial', 'true');
+      // this.storage.set('hasSeenTutorial', 'true');
-    });
+    // });
   }
 
   onSlideChangeStart(slider: any) {

packages/demos/conference-app/angular/src/pages/tabs-page/tabs-page.html

@@ -1,16 +0,0 @@
-<ion-page>
-  <ion-tabs name="conference">
-    <ion-tab title="Schedule" icon="calendar">
-      <ion-nav [root]="tab1Root"></ion-nav>
-    </ion-tab>
-    <ion-tab title="Speakers" icon="contacts">
-      <ion-nav [root]="tab2Root"></ion-nav>
-    </ion-tab>
-    <ion-tab title="Map" icon="map">
-      <ion-nav [root]="tab3Root"></ion-nav>
-    </ion-tab>
-    <ion-tab title="About" icon="information-circle">
-      <ion-nav [root]="tab4Root"></ion-nav>
-    </ion-tab>
-  </ion-tabs>
-</ion-page>

packages/demos/conference-app/angular/tsconfig.json

@@ -1,19 +1,25 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "outDir": "./dist/out-tsc",
+    "allowUnreachableCode": true,
-    "sourceMap": true,
+    "alwaysStrict": false,
-    "declaration": false,
+    "declaration": true,
-    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ],
     "lib": [
-      "es2017",
+      "dom",
-      "dom"
+      "es2015"
-    ]
+    ],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noImplicitReturns": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "outDir": "./dist/out-tsc",
+    "pretty": true,
+    "removeComments": false,
+    "target": "es2015"
   }
 }