refactor(navigation): get rid of ion-nav-controller, get nav working correctly in DOM, angular, react

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

@@ -9,7 +9,8 @@ const routes: Routes = [
   { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },
   { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
   { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
-  { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' }
+  { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
+  { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' }
 ];
 
 @NgModule({

packages/demos/angular/src/app/home-page/home-page.component.html

@@ -21,4 +21,7 @@
   <li>
     <a href='loading'>Loading Page</a>
   </li>
+  <li>
+    <a href='nav'>Nav Page</a>
+  </li>
 </ul>

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

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

packages/demos/angular/src/app/nav/nav.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from './pages/page-one';
+
+@Component({
+  selector: 'app-nav-page',
+  template: `
+<ion-app>
+  <ion-nav [root]="pageOne"></ion-nav>
+</ion-app>
+  `
+})
+export class NavPageComponent {
+
+  pageOne: any = PageOne;
+  constructor() {
+
+  }
+
+}

packages/demos/angular/src/app/nav/nav.module.ts

@@ -0,0 +1,31 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NavPageComponent } from './nav.component';
+import { NavRoutingModule } from './nav-routing.module';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { PageOne } from './pages/page-one';
+import { PageTwo } from './pages/page-two';
+import { PageThree } from './pages/page-three';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    NavRoutingModule,
+    IonicAngularModule
+  ],
+  declarations: [
+    NavPageComponent,
+    PageOne,
+    PageTwo,
+    PageThree
+  ],
+  entryComponents: [
+    PageOne,
+    PageTwo,
+    PageThree
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class NavModule { }

packages/demos/angular/src/app/nav/pages/page-one.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+import { PageTwo } from './page-two';
+
+@Component({
+  selector: 'page-one',
+  template: `
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Page One</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  Page One
+  <div>
+    <ion-button (click)="goToPageTwo()">Go to Page Two</ion-button>
+  </div>
+  <ul>
+    <li>ngOnInit - {{ngOnInitDetection}}</li>
+    <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
+    <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
+  </ul>
+</ion-content>
+  `
+})
+export class PageOne {
+
+  ngOnInitDetection = 'initial';
+  ionViewWillEnterDetection = 'initial';
+  ionViewDidEnterDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page one ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewWillEnter() {
+    console.log('page one ionViewWillEnter');
+    setInterval(() => {
+      this.ionViewWillEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewDidEnter() {
+    console.log('page one ionViewDidEnter');
+    setInterval(() => {
+      this.ionViewDidEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  goToPageTwo() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.push(PageTwo).then(() => console.log('push complete'));
+  }
+}

packages/demos/angular/src/app/nav/pages/page-three.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'page-three',
+  template: `
+<ion-page>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page Three</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    Page Three
+    <div>
+    <ion-button (click)="goBack()">Go Back</ion-button>
+  </div>
+    <ul>
+      <li>ngOnInit - {{ngOnInitDetection}}</li>
+      <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
+      <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
+    </ul>
+  </ion-content>
+</ion-page>
+  `
+})
+export class PageThree {
+
+  ngOnInitDetection = 'initial';
+  ionViewWillEnterDetection = 'initial';
+  ionViewDidEnterDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page two ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewWillEnter() {
+    console.log('page two ionViewWillEnter');
+    setInterval(() => {
+      this.ionViewWillEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewDidEnter() {
+    console.log('page two ionViewDidEnter');
+    setInterval(() => {
+      this.ionViewDidEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  goBack() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.pop().then(() => console.log('pop complete'));
+  }
+}

packages/demos/angular/src/app/nav/pages/page-two.ts

@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+
+import { PageThree } from './page-three';
+
+@Component({
+  selector: 'page-two',
+  template: `
+<ion-page>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page Two</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    Page Two
+    <div>
+      <ion-button (click)="goNext()">Go to Page Three</ion-button>
+    </div>
+    <div>
+    <ion-button (click)="goBack()">Go Back</ion-button>
+  </div>
+    <ul>
+      <li>ngOnInit - {{ngOnInitDetection}}</li>
+      <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
+      <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
+    </ul>
+  </ion-content>
+</ion-page>
+  `
+})
+export class PageTwo {
+
+  ngOnInitDetection = 'initial';
+  ionViewWillEnterDetection = 'initial';
+  ionViewDidEnterDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page two ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewWillEnter() {
+    console.log('page two ionViewWillEnter');
+    setInterval(() => {
+      this.ionViewWillEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewDidEnter() {
+    console.log('page two ionViewDidEnter');
+    setInterval(() => {
+      this.ionViewDidEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  goNext() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.push(PageThree).then(() => console.log('push complete'));
+  }
+
+  goBack() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.pop().then(() => console.log('pop complete'));
+  }
+}

packages/demos/angular/tslint.json

@@ -1,6 +1,6 @@
 {
   "rulesDirectory": [
-    "node_modules/codelyzer"
+    // "node_modules/codelyzer"
   ],
   "rules": {
     "arrow-return-shorthand": true,