test(angular): update ionic/angular test app

angular/test/nav/.angular-cli.json

@@ -10,7 +10,11 @@
       "assets": [
         "assets",
         "favicon.ico",
-        { "glob": "**/*", "input": "../node_modules/@ionic/core/dist", "output": "./ionic/core" }
+        {
+          "glob": "**/*",
+          "input": "../node_modules/@ionic/angular/dist/ionic",
+          "output": "./ionic"
+        }
       ],
       "index": "index.html",
       "main": "main.ts",

angular/test/nav/src/app/action-sheet/action-sheet-page.component.ts

@@ -8,7 +8,7 @@ import { ActionSheetController } from '@ionic/angular';
   <ion-app>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Test</ion-title>
+        <ion-title>Action Sheet</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content padding>

angular/test/nav/src/app/action-sheet/action-sheet.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { ActionSheetPageComponent } from './action-sheet-page.component';
 import { ActionSheetRoutingModule } from './action-sheet-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     ActionSheetRoutingModule
   ],
-  declarations: [ActionSheetPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [ActionSheetPageComponent]
 })
 export class ActionSheetModule { }

angular/test/nav/src/app/alert/alert-page.component.ts

@@ -8,7 +8,7 @@ import { AlertController } from '@ionic/angular';
   <ion-app>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Test</ion-title>
+        <ion-title>Alert</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content padding>

angular/test/nav/src/app/alert/alert.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { AlertPageComponent } from './alert-page.component';
 import { AlertRoutingModule } from './alert-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     AlertRoutingModule
   ],
-  declarations: [AlertPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [AlertPageComponent]
 })
 export class AlertModule { }

angular/test/nav/src/app/app.module.ts

@@ -1,12 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { PostTestService } from './post-test/post-test.service';
 
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 @NgModule({
   declarations: [AppComponent],
@@ -14,10 +14,9 @@ import { IonicAngularModule } from '@ionic/angular';
     AppRoutingModule,
     BrowserModule,
     HttpClientModule,
-    IonicAngularModule.forRoot(),
+    IonicModule.forRoot(),
   ],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [PostTestService]
 })
 export class AppModule { }

angular/test/nav/src/app/badge/badge-page.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { Badge } from '@ionic/angular';
 
 @Component({
   selector: 'app-badge-page',
@@ -76,8 +77,10 @@ import { Component } from '@angular/core';
 export class BadgePageComponent {
   dynamicColor = 'primary';
 
-  constructor() {
+  @ViewChild(Badge) badge: Badge;
 
+  ngOnInit() {
+    console.log(this.badge);
   }
 
   toggleColor() {

angular/test/nav/src/app/badge/badge.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { BadgePageComponent } from './badge-page.component';
 import { BadgeRoutingModule } from './badge-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    BadgeRoutingModule
+    BadgeRoutingModule,
+    IonicModule
   ],
-  declarations: [BadgePageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [BadgePageComponent]
 })
 export class BadgeModule { }

angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts

@@ -1,8 +1,7 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 import { BasicInputsPageComponent } from './basic-inputs-page.component';
 
@@ -14,8 +13,10 @@ describe('InputsTestPageComponent', () => {
     async(() => {
       TestBed.configureTestingModule({
         declarations: [BasicInputsPageComponent],
-        imports: [FormsModule, IonicAngularModule.forRoot()],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        imports: [
+          FormsModule,
+          IonicModule.forRoot()
+        ],
       }).compileComponents();
     })
   );

angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.module.ts

@@ -1,7 +1,7 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicAngularModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
 
 import { BasicInputsPageComponent } from './basic-inputs-page.component';
 import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module';
@@ -11,9 +11,8 @@ import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module
     BasicInputsPageRoutingModule,
     CommonModule,
     FormsModule,
-    IonicAngularModule
+    IonicModule
   ],
-  declarations: [BasicInputsPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [BasicInputsPageComponent]
 })
 export class BasicInputsPageModule {}

angular/test/nav/src/app/card/card.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { CardPageComponent } from './card-page.component';
 import { CardRoutingModule } from './card-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     CardRoutingModule
   ],
-  declarations: [CardPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [CardPageComponent]
 })
 export class CardModule { }

angular/test/nav/src/app/content/content.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { ContentPageComponent } from './content-page.component';
 import { ContentRoutingModule } from './content-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     ContentRoutingModule
   ],
-  declarations: [ContentPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [ContentPageComponent]
 })
 export class ContentModule { }

angular/test/nav/src/app/form-sample-page/form-sample-page.component.html

@@ -1,5 +1,5 @@
 <ion-app>
-  <form #myForm="ngForm">
+  <form #myForm="ngForm" class="ion-page">
     <ion-header>
       <ion-toolbar>
         <ion-title>Sample Form</ion-title>
@@ -35,9 +35,9 @@
         <ion-text *ngIf="viewJobTitle.invalid && (viewJobTitle.dirty || viewJobTitle.touched)" color="danger">
           <small *ngIf="viewJobTitle.errors['required']">Job Title is required</small>
         </ion-text>
-          <ion-divider>
+        <ion-item-divider>
           <ion-label>I Would Like To:</ion-label>
-          </ion-divider>
+        </ion-item-divider>
         <ion-item>
           <ion-label>Drink the Beers</ion-label>
           <ion-toggle name="drinkBeers" color="dark" [(ngModel)]="drinkBeers"></ion-toggle>
@@ -69,9 +69,9 @@
         <ion-text *ngIf="viewSalary.invalid && (viewSalary.dirty || viewSalary.touched)" color="danger">
           <small *ngIf="viewSalary.errors['required']">Desired Salary is required</small>
         </ion-text>
-          <ion-divider>
+        <ion-item-divider>
           <ion-label>My Level of Happy</ion-label>
-          </ion-divider>
+        </ion-item-divider>
         <ion-item>
           <ion-range name="levelOfHappy" [(ngModel)]="levelOfHappy">
             <ion-icon name="sad" slot="start"></ion-icon>

angular/test/nav/src/app/form-sample-page/form-sample-page.module.ts

@@ -1,7 +1,7 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 import { FormSamplePageComponent } from './form-sample-page.component';
 import { FormSamplePageRoutingModule } from './form-sample-page-routing.module';
@@ -11,9 +11,8 @@ import { FormSamplePageRoutingModule } from './form-sample-page-routing.module';
     FormSamplePageRoutingModule,
     CommonModule,
     FormsModule,
-    IonicAngularModule
+    IonicModule
   ],
-  declarations: [FormSamplePageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [FormSamplePageComponent]
 })
 export class FormSamplePageModule {}

angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.spec.ts

@@ -1,7 +1,6 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 import { GroupInputsPageComponent } from './group-inputs-page.component';
 
@@ -12,9 +11,11 @@ describe('GroupInputsPageComponent', () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        imports: [FormsModule, IonicAngularModule],
-        declarations: [GroupInputsPageComponent],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        imports: [
+          FormsModule,
+          IonicModule
+        ],
+        declarations: [GroupInputsPageComponent]
       }).compileComponents();
     })
   );

angular/test/nav/src/app/group-inputs-page/group-inputs-page.module.ts

@@ -1,7 +1,7 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 import { GroupInputsPageComponent } from './group-inputs-page.component';
 import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
@@ -11,9 +11,8 @@ import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module
     CommonModule,
     FormsModule,
     GroupInputsPageRoutingModule,
-    IonicAngularModule
+    IonicModule
   ],
-  declarations: [GroupInputsPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [GroupInputsPageComponent]
 })
 export class GroupInputsPageModule {}

angular/test/nav/src/app/home-page/home-page.component.html

@@ -1,38 +1,15 @@
-<div class='title'>
-  Ionic Core Angular Demo Application
-</div>
 
-<div>
+<h1>
+  @ionic/angular tests
+</h1>
+
+<h3>Overlays</h3>
 <ul>
-    <li>
-      <a [routerLink]="['/show-hide-when']">Show/Hide When Test Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/basic-inputs']">Basic Inputs Test Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/group-inputs']">Group Inputs Test Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/form-sample']">Form Sample Test Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/alert']">Alert Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/badge']">Badge Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/card']">Card Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/content']">Content Page</a>
-    </li>
   <li>
     <a [routerLink]="['/actionSheet']">Action Sheet Page</a>
   </li>
   <li>
-      <a [routerLink]="['/toast']">Toast Page</a>
+    <a [routerLink]="['/alert']">Alert Page</a>
   </li>
   <li>
     <a [routerLink]="['/loading']">Loading Page</a>
@@ -44,16 +21,29 @@
     <a [routerLink]="['/popover']">Popover Page</a>
   </li>
   <li>
-      <a [routerLink]="['/segment']">Segment Page</a>
-    </li>
-    <li>
-      <a [routerLink]="['/virtual-scroll']">Virtual Scroll Page</a>
+    <a [routerLink]="['/toast']">Toast Page</a>
   </li>
 </ul>
-</div>
 
-<div>
-  <h2>Nav Tests</h2>
+
+<h3>Inputs</h3>
+<ul>
+  <li>
+    <a [routerLink]="['/basic-inputs']">Basic Inputs Test Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/group-inputs']">Group Inputs Test Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/form-sample']">Form Sample Test Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/segment']">Segment Page</a>
+  </li>
+</ul>
+
+
+<h3>Navigation</h3>
 <ul>
   <li>
     <a href='no-routing-nav'>No Routing</a>
@@ -63,4 +53,22 @@
   </li>
 </ul>
 
-</div>
+
+<h3>Content</h3>
+<ul>
+  <li>
+    <a [routerLink]="['/badge']">Badge Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/card']">Card Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/content']">Content Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/show-hide-when']">Show/Hide When Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/virtual-scroll']">Virtual Scroll Page</a>
+  </li>
+</ul>

angular/test/nav/src/app/home-page/home-page.module.ts

@@ -1,13 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { HomePageComponent } from './home-page.component';
 import { HomePageRoutingModule } from './home-page-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    HomePageRoutingModule
+    HomePageRoutingModule,
+    IonicModule
   ],
   declarations: [HomePageComponent]
 })

angular/test/nav/src/app/loading/loading-page.component.ts

@@ -8,7 +8,7 @@ import { LoadingController } from '@ionic/angular';
   <ion-app>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Test</ion-title>
+        <ion-title>Loading</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content padding>

angular/test/nav/src/app/loading/loading.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { LoadingPageComponent } from './loading-page.component';
 import { LoadingRoutingModule } from './loading-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     LoadingRoutingModule
   ],
-  declarations: [LoadingPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [LoadingPageComponent]
 })
 export class LoadingModule { }

angular/test/nav/src/app/modal/modal-page.component.ts

@@ -9,7 +9,7 @@ import { ModalPageToPresent } from './modal-page-to-present';
   <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Test</ion-title>
+          <ion-title>Modal</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content padding>

angular/test/nav/src/app/modal/modal.module.ts

@@ -1,27 +1,23 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicAngularModule } from '@ionic/angular';
 
+import { IonicModule } from '@ionic/angular';
 import { ModalPageComponent } from './modal-page.component';
 import { ModalRoutingModule } from './modal-routing.module';
-
 import { ModalPageToPresent } from './modal-page-to-present';
 
 @NgModule({
   imports: [
     CommonModule,
-    IonicAngularModule.forRoot(),
+    IonicModule.forRoot(),
     ModalRoutingModule
   ],
   declarations: [
     ModalPageComponent,
     ModalPageToPresent
   ],
-  providers: [
-  ],
   entryComponents: [
     ModalPageToPresent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class ModalModule { }

angular/test/nav/src/app/no-routing-nav/no-routing-nav.module.ts

@@ -1,9 +1,9 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { NoRoutingNavPageComponent } from './no-routing-nav.component';
 import { NoRoutingNavRoutingModule } from './no-routing-nav-routing.module';
-import { IonicAngularModule } from '@ionic/angular';
 
 import { PageOne } from './pages/page-one';
 import { PageTwo } from './pages/page-two';
@@ -13,7 +13,7 @@ import { PageThree } from './pages/page-three';
   imports: [
     CommonModule,
     NoRoutingNavRoutingModule,
-    IonicAngularModule,
+    IonicModule,
   ],
   declarations: [
     NoRoutingNavPageComponent,
@@ -25,7 +25,6 @@ import { PageThree } from './pages/page-three';
     PageOne,
     PageTwo,
     PageThree
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class NoRoutingNavModule { }

angular/test/nav/src/app/popover/popover-page.component.ts

@@ -9,7 +9,7 @@ import { PopoverPageToPresent } from './popover-page-to-present';
   <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Test</ion-title>
+          <ion-title>Popover</ion-title>
           <ion-buttons slot="end">
             <ion-button (click)="clickMe()">
               No event passed

angular/test/nav/src/app/popover/popover.module.ts

@@ -1,6 +1,6 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 import { PopoverPageComponent } from './popover-page.component';
 import { PopoverRoutingModule } from './popover-routing.module';
@@ -10,7 +10,7 @@ import { PopoverPageToPresent } from './popover-page-to-present';
 @NgModule({
   imports: [
     CommonModule,
-    IonicAngularModule.forRoot(),
+    IonicModule.forRoot(),
     PopoverRoutingModule
   ],
   declarations: [
@@ -21,7 +21,6 @@ import { PopoverPageToPresent } from './popover-page-to-present';
   ],
   entryComponents: [
     PopoverPageToPresent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PopoverModule { }

angular/test/nav/src/app/segment/segment.module.ts

@@ -1,7 +1,7 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 import { SegmentPageComponent } from './segment-page.component';
 import { SegmentRoutingModule } from './segment-routing.module';
@@ -11,9 +11,8 @@ import { SegmentRoutingModule } from './segment-routing.module';
     CommonModule,
     FormsModule,
     SegmentRoutingModule,
-    IonicAngularModule
+    IonicModule
   ],
-  declarations: [SegmentPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [SegmentPageComponent]
 })
 export class SegmentModule { }

angular/test/nav/src/app/show-hide-when/show-hide-when.html

@@ -1,7 +1,7 @@
 <ion-app>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Test</ion-title>
+        <ion-title>Show/Hide When</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content padding>

angular/test/nav/src/app/show-hide-when/show-hide-when.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { ShowHideWhenComponent } from './show-hide-when-page.component';
 import { ShowHideWhenRoutingModule } from './show-hide-when-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     ShowHideWhenRoutingModule
   ],
-  declarations: [ShowHideWhenComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [ShowHideWhenComponent]
 })
 export class ShowHideWhenModule { }

angular/test/nav/src/app/simple-nav/page-one/page-one-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { IonicModule } from '@ionic/angular';
 import { PageOne } from './page-one';
 
 const routes: Routes = [
@@ -8,7 +9,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
 })
 export class PageOneRoutingModule { }

angular/test/nav/src/app/simple-nav/page-one/page-one.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { PageOne } from './page-one';
@@ -9,9 +9,6 @@ import { PageOneRoutingModule } from './page-one-routing.module';
     CommonModule,
     PageOneRoutingModule
   ],
-  declarations: [PageOne],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
-  ]
+  declarations: [PageOne]
 })
 export class PageOneModule { }

angular/test/nav/src/app/simple-nav/page-three/page-three-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { IonicModule } from '@ionic/angular';
 import { PageThree } from './page-three';
 
 const routes: Routes = [
@@ -8,7 +9,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
 })
 export class PageThreeRoutingModule { }

angular/test/nav/src/app/simple-nav/page-three/page-three.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { PageThree } from './page-three';
@@ -11,9 +11,6 @@ import { PageThreeRoutingModule } from './page-three-routing.module';
   ],
   declarations: [
     PageThree
-  ],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageThreeModule { }

angular/test/nav/src/app/simple-nav/page-three/page-three.ts

@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'page-three',
@@ -9,32 +10,29 @@ import { Component, ViewEncapsulation } from '@angular/core';
     </ion-toolbar>
   </ion-header>
   <ion-content padding>
-    Page Three {{ts}}
-    <div>isProd: {{isProd}}</div>
     <div>paramOne: {{paramOne}}</div>
     <div>paramTwo: {{paramTwo}}</div>
     <div>
-      <ion-button>Go Back</ion-button>
+      <ion-button [routerLink]="['/simple-nav/page-one']">Go to Page One</ion-button>
+    </div>
+    <div>
+      <ion-button [routerLink]="['/simple-nav/page-two']">Go to Page Two</ion-button>
     </div>
   </ion-content>
   `
 })
 export class PageThree {
 
-  ts: number;
-  isProd = false;
   paramOne: any = null;
   paramTwo: any = null;
 
-  // constructor(private navController: NavController, private navParams: NavParams) {
+  constructor(private route: ActivatedRoute) {}
 
-  //   this.isProd = navParams.get('isProd');
-  //   this.paramOne = navParams.get('paramOne');
-  //   this.paramTwo = navParams.get('paramTwo');
-
-  //   setInterval(() => {
-  //     this.ts = Date.now();
-  //   }, 500);
-  // }
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+       this.paramOne = params['paramOne'];
+       this.paramTwo = params['paramTwo'];
+    });
+  }
 
 }

angular/test/nav/src/app/simple-nav/page-two/page-two-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { IonicModule } from '@ionic/angular';
 import { PageTwo } from './page-two';
 
 const routes: Routes = [
@@ -11,7 +12,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
 })
 export class PageTwoRoutingModule { }

angular/test/nav/src/app/simple-nav/page-two/page-two.module.ts

@@ -1,10 +1,7 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import {
-  IonicAngularModule,
-} from '@ionic/angular';
-
+import { IonicModule } from '@ionic/angular';
 import { PageTwo } from './page-two';
 import { PageTwoRoutingModule } from './page-two-routing.module';
 
@@ -13,13 +10,10 @@ import { PageTwoRoutingModule } from './page-two-routing.module';
   imports: [
     CommonModule,
     PageTwoRoutingModule,
-    IonicAngularModule,
+    IonicModule,
   ],
   declarations: [
     PageTwo,
-  ],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageTwoModule { }

angular/test/nav/src/app/simple-nav/page-two/page-two.ts

@@ -11,12 +11,12 @@ import { Location } from '@angular/common';
       </ion-toolbar>
     </ion-header>
     <ion-content padding>
-      Page Two - {{ts}}
+      Page Two
       <div>
-        <ion-button>Go to Page Three</ion-button>
+        <ion-button [routerLink]="['/simple-nav/page-three/paramOne/paramTwo']">Go to Page Three</ion-button>
       </div>
       <div>
-        <ion-button>Go Back</ion-button>
+        <ion-button [routerLink]="['/simple-nav/page-one']">Go to Page One</ion-button>
       </div>
     </ion-content>
   `

angular/test/nav/src/app/simple-nav/simple-nav-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { IonicModule } from '@ionic/angular';
 import { SimpleNavPageComponent } from './simple-nav.component';
 
 const routes: Routes = [
@@ -16,7 +17,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
 })
 export class SimpleNavRoutingModule { }

angular/test/nav/src/app/simple-nav/simple-nav.module.ts

@@ -1,10 +1,10 @@
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 
+import { IonicModule } from '@ionic/angular';
 import { SimpleNavPageComponent } from './simple-nav.component';
 import { SimpleNavRoutingModule } from './simple-nav-routing.module';
 
-import { IonicAngularModule } from '@ionic/angular';
 
 @NgModule({
   declarations: [
@@ -12,9 +12,8 @@ import { IonicAngularModule } from '@ionic/angular';
   ],
   imports: [
     CommonModule,
-    IonicAngularModule,
+    IonicModule,
     SimpleNavRoutingModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class SimpleNavModule {}

angular/test/nav/src/app/toast/toast-page.component.ts

@@ -8,7 +8,7 @@ import { ToastController } from '@ionic/angular';
   <ion-app>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Test</ion-title>
+        <ion-title>Toast</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content padding>

angular/test/nav/src/app/toast/toast.module.ts

@@ -1,15 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { IonicModule } from '@ionic/angular';
 import { ToastPageComponent } from './toast-page.component';
 import { ToastRoutingModule } from './toast-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IonicModule,
     ToastRoutingModule
   ],
-  declarations: [ToastPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [ToastPageComponent]
 })
 export class ToastModule { }

angular/test/nav/src/app/virtual-scroll/virtual-scroll.module.ts

@@ -1,17 +1,16 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { IonicAngularModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 import { VirtualScrollPageComponent } from './virtual-scroll-page.component';
 import { VirtualScrollRoutingModule } from './virtual-scroll-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    IonicAngularModule,
+    IonicModule,
     VirtualScrollRoutingModule
   ],
-  declarations: [VirtualScrollPageComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [VirtualScrollPageComponent]
 })
 export class VirtualScrollModule { }

angular/test/nav/src/index.html

@@ -2,15 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Demo</title>
+  <title>Angular</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script src="ionic/core/ionic.js"></script>
-  <script type="text/javascript">
-    // window.Ionic.config = { mode: 'ios' };
-  </script>
 </head>
 <body>
   <app-root></app-root>