fix(angular): disable change detection detach

.circleci/config.yml

@@ -154,7 +154,17 @@ jobs:
           command: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --update-screenshot || true
           working_directory: /tmp/workspace/core
 
-  test-angular:
+  test-angular-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/angular
+
+  test-angular-e2e:
     <<: *defaults
     steps:
       - checkout
@@ -174,10 +184,6 @@ workflows:
       - build
       - build-core:
           requires: [build]
-      - build-angular:
-          requires: [build-core]
-      - test-angular:
-          requires: [build-angular]
       - test-core-clean-build:
           requires: [build-core]
       - test-core-lint:
@@ -196,3 +202,10 @@ workflows:
           filters:
             branches:
               only: master
+
+      - build-angular:
+          requires: [build-core]
+      - test-angular-lint:
+          requires: [build-angular]
+      - test-angular-e2e:
+          requires: [build-angular]

angular/package.json

@@ -28,7 +28,7 @@
     "build.ng": "./node_modules/.bin/ngc",
     "clean": "node scripts/clean.js",
     "clean-generated": "node ./scripts/clean-generated.js",
-    "lint": "echo TODO",
+    "lint": "npm run lint.ts",
     "lint.ts": "tslint --project .",
     "lint.fix": "tslint --project . --fix",
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",

angular/src/directives/navigation/stack-controller.ts

@@ -106,7 +106,8 @@ export class StackController {
       const element = view.element;
       element.setAttribute('aria-hidden', 'true');
       element.classList.add('ion-page-hidden');
-      view.ref.changeDetectorRef.detach();
+      // TODO
+      // view.ref.changeDetectorRef.detach();
     }
     this.viewsSnapshot = views.slice();
   }
@@ -132,10 +133,11 @@ export class StackController {
       this.skipTransition = false;
       return;
     }
-    if (enteringView) {
+    // TODO
-      enteringView.ref.changeDetectorRef.reattach();
+    // if (enteringView) {
-      enteringView.ref.changeDetectorRef.markForCheck();
+    //   enteringView.ref.changeDetectorRef.reattach();
-    }
+    //   enteringView.ref.changeDetectorRef.markForCheck();
+    // }
     const enteringEl = enteringView ? enteringView.element : undefined;
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;

angular/test/test-app/e2e/src/inputs.e2e-spec.ts

@@ -1,11 +1,14 @@
 import { browser, element, by } from 'protractor';
-import { getProperty, setProperty } from './utils';
+import { getProperty, setProperty, handleErrorMessages } from './utils';
 
 describe('inputs', () => {
 
   beforeEach(async () => {
     await browser.get('/inputs');
   });
+  afterEach(() => {
+    handleErrorMessages();
+  });
 
   it('should have default value', async () => {
     expect(await getProperty('ion-checkbox', 'checked')).toEqual(true);

angular/test/test-app/e2e/src/modal.e2e-spec.ts

@@ -1,11 +1,14 @@
 import { browser, element, by } from 'protractor';
-import { waitTime, getText } from './utils';
+import { waitTime, getText, handleErrorMessages } from './utils';
 
 describe('modals', () => {
 
   beforeEach(async () => {
     await browser.get('/modals');
   });
+  afterEach(() => {
+    handleErrorMessages();
+  });
 
   it('should open and close', async () => {
     await element(by.css('#action-button')).click();

angular/test/test-app/e2e/src/router-link.e2e-spec.ts

@@ -1,11 +1,15 @@
 import { browser, element, by } from 'protractor';
-import { waitTime, testStack, testLifeCycle } from './utils';
+import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
 
 describe('router-link', () => {
 
   beforeEach(async () => {
     await browser.get('/router-link');
   });
+  afterEach(() => {
+    handleErrorMessages();
+  });
+
 
   it('should have correct lifecycle counts', async () => {
     await testLifeCycle('app-router-link', {

angular/test/test-app/e2e/src/utils.ts

@@ -1,4 +1,4 @@
-import { browser, by, element, ElementFinder } from 'protractor';
+import { browser } from 'protractor';
 
 export function getProperty(selector: string, property: string) {
   return browser.executeScript(`
@@ -32,7 +32,25 @@ export interface LifeCycleCount {
   ionViewDidLeave: number;
 }
 
+export function handleErrorMessages() {
+  browser.manage().logs().get('browser').then(function(browserLog) {
+    let severWarnings = false;
+
+    for (let i; i <= browserLog.length - 1; i++) {
+        if (browserLog[i].level.name === 'SEVERE') {
+            console.log('\n' + browserLog[i].level.name);
+            console.log('(Possibly exception) \n' + browserLog[i].message);
+
+            severWarnings = true;
+        }
+    }
+
+    expect(severWarnings).toBe(false);
+  });
+}
+
 export async function testLifeCycle(selector: string, expected: LifeCycleCount) {
+  await waitTime(50);
   expect(await getText(`${selector} #ngOnInit`)).toEqual('1');
   expect(await getText(`${selector} #ionViewWillEnter`)).toEqual(expected.ionViewWillEnter.toString());
   expect(await getText(`${selector} #ionViewDidEnter`)).toEqual(expected.ionViewDidEnter.toString());

angular/test/test-app/src/app/modal-example/modal-example.component.ts

@@ -25,6 +25,9 @@ export class ModalExampleComponent implements OnInit {
   }
 
   ionViewWillEnter() {
+    if (this.onInit !== 1) {
+      throw new Error('ngOnInit was not called');
+    }
     NgZone.assertInAngularZone();
     this.willEnter++;
   }

angular/test/test-app/src/app/router-link-page/router-link-page.component.html

@@ -3,11 +3,11 @@
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
+    <ion-title>router-link page</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content padding>
-  router-link page
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>

angular/test/test-app/src/app/router-link-page/router-link-page.component.ts

@@ -18,6 +18,9 @@ export class RouterLinkPageComponent implements OnInit {
   }
 
   ionViewWillEnter() {
+    if (this.onInit !== 1) {
+      throw new Error('ngOnInit was not called');
+    }
     NgZone.assertInAngularZone();
     this.willEnter++;
   }

angular/test/test-app/src/app/router-link/router-link.component.ts

@@ -41,6 +41,9 @@ export class RouterLinkComponent implements OnInit {
   }
 
   ionViewWillEnter() {
+    if (this.onInit !== 1) {
+      throw new Error('ngOnInit was not called');
+    }
     NgZone.assertInAngularZone();
     this.willEnter++;
   }

angular/test/test-app/src/app/tabs/tabs.component.ts

@@ -1,14 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class TabsComponent implements OnInit {
+export class TabsComponent {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
 
 }