fix: mark reattached view for CD (#1803)

* fix: mark reattached view for CD

* chore: fix AOT build error

Author: Alexander Vakrilov

e2e/router/app/counter.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+    providedIn: "root"
+})
+export class CounterService {
+    counter$ = new BehaviorSubject<number>(0);
+
+    tick() {
+        this.counter$.next(this.counter$.value + 1);
+    }
+}

e2e/router/app/first/first.component.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit, OnDestroy, OnChanges, DoCheck } from "@angular/core";
-import { ActivatedRoute, Router, Route } from "@angular/router";
-import { Location } from "@angular/common";
 import { RouterExtensions } from "nativescript-angular/router";
-
 import { Page } from "tns-core-modules/ui/page";
 
+import { CounterService } from "../counter.service";
+
 @Component({
     selector: "first",
     template: `
@@ -21,12 +20,18 @@ import { Page } from "tns-core-modules/ui/page";
         <Button text="RESET" automationText="RESET" (tap)="reset()"></Button>
         <Label [text]="message"></Label>
         <Label [text]="'CHECK: ' + doCheckCount"></Label>
+        <Label [text]="'COUNTER: ' + (service.counter$ | async)"></Label>
     </StackLayout>`
 })
 export class FirstComponent implements OnInit, OnDestroy, DoCheck {
     public message: string = "";
     public doCheckCount: number = 0;
-    constructor(private routerExt: RouterExtensions, page: Page) {
+
+    constructor(
+        private routerExt: RouterExtensions,
+        public service: CounterService,
+        page: Page) {
+
         console.log("FirstComponent - constructor() page: " + page);
     }
 
@@ -42,7 +47,7 @@ export class FirstComponent implements OnInit, OnDestroy, DoCheck {
         this.doCheckCount++;
         console.log("FirstComponent - ngDoCheck(): " + this.doCheckCount);
     }
-    
+
     reset() {
         this.doCheckCount = 0;
     }

e2e/router/app/second/second.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
-import { ActivatedRoute, Router, Route } from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
 
 import { RouterExtensions } from "nativescript-angular/router";
 import { Page } from "tns-core-modules/ui/page";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
+import { CounterService } from "../counter.service";
 
 @Component({
     selector: "second",
@@ -19,6 +20,8 @@ import { map } from "rxjs/operators";
         <Button text="LOAD NESTED NAMED OUTLET" (tap)="loadNestedNamedOutlet()"></Button>
         <Button text="BACK" automationText="BACK" (tap)="goBack()"></Button>
         
+        <Button text="TICK" automationText="TICK" (tap)="service.tick()"></Button>
+        
         <GridLayout row="1" rows="*,*">
             <GridLayout row="0" class="nested-outlet">
                 <router-outlet></router-outlet>
@@ -33,7 +36,11 @@ export class SecondComponent implements OnInit, OnDestroy {
     public depth$: Observable<string>;
     public nextDepth$: Observable<number>;
 
-    constructor(private routerExt: RouterExtensions, private route: ActivatedRoute, page: Page) {
+    constructor(
+        private routerExt: RouterExtensions,
+        private route: ActivatedRoute,
+        public service: CounterService,
+        page: Page) {
         console.log("SecondComponent - constructor() page: " + page);
         this.depth$ = route.params.pipe(map(r => r["depth"]));
         this.nextDepth$ = route.params.pipe(map(r => +r["depth"] + 1));

e2e/router/e2e/router.e2e-spec.ts

@@ -449,6 +449,46 @@ describe("Simple navigate and back should trigger only one CD on FirstComponent"
     });
 });
 
+describe("Simple navigate and back should trigger only one CD on FirstComponent even with 3 changes in service", () => {
+    let driver: AppiumDriver;
+
+    before(async () => {
+        driver = await createDriver();
+        await driver.resetApp();
+    });
+
+    it("should find First", async () => {
+        await assureFirstComponent(driver);
+    });
+
+    it("should reset counter", async () => {
+        await findAndClick(driver, "RESET");
+        await driver.waitForElement("CHECK: 1");
+        await driver.waitForElement("COUNTER: 0");
+    });
+
+    it("should navigate to Second(1)/master", async () => {
+        await findAndClick(driver, "GO TO SECOND");
+
+        await assureSecondComponent(driver, 1);
+        await assureNestedMasterComponent(driver);
+    });
+
+    it("should increase counter", async () => {
+        await findAndClick(driver, "TICK");
+        await findAndClick(driver, "TICK");
+        await findAndClick(driver, "TICK");
+    });
+
+    it("should navigate back to First", async () => {
+        await goBack(driver);
+        await assureFirstComponent(driver);
+        await driver.waitForElement("CHECK: 2");
+        await driver.waitForElement("COUNTER: 3");
+    });
+});
+
+
 async function assureFirstComponent(driver: AppiumDriver) {
     await driver.findElementByAutomationText("FirstComponent");
 }

e2e/router/package.json

@@ -44,7 +44,7 @@
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "next",
     "tslib": "^1.7.1",
-    "typescript": "^3.1.6"
+    "typescript": "~3.1.1"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",

nativescript-angular/router/page-router-outlet.ts

@@ -262,6 +262,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         this.activated = ref;
 
         // reattach to ChangeDetection
+        this.activated.hostView.markForCheck();
         this.activated.hostView.reattach();
         this._activatedRoute = activatedRoute;
         this.markActivatedRoute(activatedRoute);