Release 7.0.2

CHANGELOG.md

@@ -1,3 +1,14 @@
+<a name="7.0.2"></a>
+## [7.0.2](https://github.com/NativeScript/nativescript-angular/compare/7.0.1...7.0.2) (2018-11-26)
+
+
+### Bug Fixes
+
+* **page-router-outlet:** actionBarVisibility not applied ([#1621](https://github.com/NativeScript/nativescript-angular/issues/1621)) ([a6ff509](https://github.com/NativeScript/nativescript-angular/commit/a6ff509))
+* **router-extensions:** unable to go back with relativeTo param ([#1632](https://github.com/NativeScript/nativescript-angular/issues/1632)) ([63900dc](https://github.com/NativeScript/nativescript-angular/commit/63900dc))
+
+
+
 <a name="7.0.1"></a>
 ## [7.0.1](https://github.com/NativeScript/nativescript-angular/compare/7.0.0...7.0.1) (2018-11-20)
 

e2e/modal-navigation-ng/e2e/screens/screen.ts

@@ -44,7 +44,7 @@ export class Screen {
     }
 
     loadedHome = async () => {
-        const lblHome = await this._driver.findElementByAutomationText(home);
+        const lblHome = await this._driver.waitForElement(home);
         assert.isTrue(await lblHome.isDisplayed());
         console.log(home + " loaded!");
     }
@@ -149,7 +149,7 @@ export class Screen {
     }
 
     loadedModalFrame = async () => {
-        const lblModal = await this._driver.findElementByAutomationText(modal, 1000);
+        const lblModal = await this._driver.waitForElement(modal, 5000);
         assert.isTrue(await lblModal.isDisplayed(), `${modal} is not displayed!`);
         console.log(modal + " loaded!");
     }
@@ -226,7 +226,7 @@ export class Screen {
     }
 
     loadedSecondPage = async () => {
-        const lblModalSecond = await this._driver.findElementByAutomationText(modalSecond);
+        const lblModalSecond = await this._driver.waitForElement(modalSecond, 5000);
         assert.isTrue(await lblModalSecond.isDisplayed());
         console.log(modalSecond + " loaded!");
     }
@@ -259,7 +259,7 @@ export class Screen {
     }
 
     loadedNestedModalFrame = async () => {
-        const lblModalNested = await this._driver.findElementByAutomationText(modalNested);
+        const lblModalNested = await this._driver.waitForElement(modalNested, 5000);
         assert.isTrue(await lblModalNested.isDisplayed());
         console.log(modalNested + " loaded!");
     }

e2e/renderer/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptRouterModule, NSEmptyOutletComponent } from "nativescript-angular/router";
 
 import { ActionBarDynamicItemsComponent } from "./action-bar/action-bar-dynamic-items.component";
 import { ActionBarExtensionComponent } from "./action-bar/action-bar-extension.component";
@@ -54,6 +54,16 @@ export const routes = [
             component: NestedPageComponent
         }]
     },
+    {
+        path: "action-bar-visibility-never-lazy",
+        component: ActionBarVisibilityNeverComponent,
+        children: [{
+            path: "nested",
+            outlet: "nested",
+            component: NSEmptyOutletComponent,
+            loadChildren:"~/page-router-outlet/nested-lazy-page.module#NestedLazyPageModule"
+        }]
+    },
     {
         path: "action-bar-dynamic",
         component: ActionBarDynamicItemsComponent,
@@ -111,7 +121,6 @@ export const navigatableComponents = [
     ActionBarVisibilityAlwaysComponent,
     ActionBarVisibilityNeverComponent,
     ActionBarVisibilityAutoComponent,
-    NestedPageComponent,
 
     TabItemBindingComponent,
 

e2e/renderer/app/app.module.ts

@@ -11,6 +11,8 @@ import { ItemsService } from "./items.service";
 
 import { rendererTraceCategory, viewUtilCategory, bootstrapCategory } from "nativescript-angular/trace";
 import { addCategories, enable, categories } from "tns-core-modules/trace";
+import { SharedModule } from "./shared.module";
+
 addCategories(bootstrapCategory);
 addCategories(rendererTraceCategory);
 addCategories(viewUtilCategory);
@@ -22,7 +24,7 @@ export class MyErrorHandler implements ErrorHandler {
         console.log("### ErrorHandler Error: " + error.toString());
         console.log("### ErrorHandler Stack: " + error.stack);
     }
-}  
+}
 
 
 @NgModule({
@@ -38,6 +40,7 @@ export class MyErrorHandler implements ErrorHandler {
     imports: [
         NativeScriptModule,
         AppRoutingModule,
+        SharedModule
     ],
     schemas: [NO_ERRORS_SCHEMA],
 })

e2e/renderer/app/list.component.ts

@@ -9,6 +9,7 @@ import { Component } from "@angular/core";
             <Button text="ActionBarVisibility Always" [nsRouterLink]="['/action-bar-visibility-always']"></Button>
             <Button text="ActionBarVisibility Never" [nsRouterLink]="['/action-bar-visibility-never']"></Button>
             <Button text="ActionBarVisibility Auto" [nsRouterLink]="['/action-bar-visibility-auto']"></Button>
+            <Button text="ActionBarVisibility Never Lazy" [nsRouterLink]="['/action-bar-visibility-never-lazy']"></Button>
             <Button text="TabItem Binding" [nsRouterLink]="['/tab-item-binding']"></Button>
             <Button text="NgFor" [nsRouterLink]="['/ngfor']"></Button>
             <Button text="NgForOf" [nsRouterLink]="['/ngforof']"></Button>

e2e/renderer/app/page-router-outlet/nested-lazy-page.module.ts

@@ -0,0 +1,20 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { SharedModule } from "~/shared.module";
+import { NestedPageComponent } from "./nested-page.component";
+
+@NgModule({
+    imports: [
+        SharedModule,
+        NativeScriptCommonModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forChild([
+            { path: "", component: NestedPageComponent }
+        ])
+    ],
+    providers: [
+    ],
+    schemas: [NO_ERRORS_SCHEMA]
+})
+export class NestedLazyPageModule { }

e2e/renderer/app/shared.module.ts

@@ -0,0 +1,14 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { NestedPageComponent } from "./page-router-outlet/nested-page.component";
+
+@NgModule({
+    imports: [
+        NativeScriptCommonModule,
+        NativeScriptRouterModule
+    ],
+    declarations:[NestedPageComponent],
+    schemas: [NO_ERRORS_SCHEMA]
+})
+export class SharedModule { }

e2e/renderer/e2e/action-bar.e2e-spec.ts

@@ -6,6 +6,7 @@ import {
 } from "nativescript-dev-appium";
 
 import { isOnTheLeft } from "./helpers/location";
+import { assert } from "chai";
 
 describe("Action Bar scenario", () => {
     let driver: AppiumDriver;
@@ -132,16 +133,10 @@ describe("Action Bar scenario", () => {
             conditional = await driver.findElementByAutomationText("conditional");
         });
 
-        it("should detach conditional action item when its condition is false", done => {
-            (async () => {
-                await toggle();
-
-                try {
-                    await driver.findElementByAutomationText("conditional");
-                } catch (e) {
-                    done();
-                }
-            })();
+        it("should detach conditional action item when its condition is false", async () => {
+            await toggle();
+            const conditionalBtn = await driver.waitForElement("conditional", 1000);
+            assert.isUndefined(conditionalBtn, "Conditional button should not be visible!");
         });
 
         it("should reattach conditional action item at correct place", async () => {

e2e/renderer/e2e/page-router-outlet.e2e-spec.ts

@@ -93,6 +93,52 @@ describe("page-router-outlet-scenario", () => {
         });
     });
 
+    describe("actionBarVisibility 'never' doesn't show action bars in lazy module page", async () => {
+        let imagePostFix = "";
+        before(async () => {
+            driver = await createDriver();
+            await driver.driver.resetApp();
+            if (driver.isIOS && driver.nsCapabilities.device.name.toLowerCase().includes("x")) {
+                imagePostFix = "-lazy";
+            }
+        });
+
+        afterEach(async function () {
+            if (this.currentTest.state === "failed") {
+                await driver.logTestArtifacts(this.currentTest.title);
+            }
+        });
+
+        it("should navigate to page", async () => {
+            const navigationButton =
+                await driver.findElementByAutomationText("ActionBarVisibility Never Lazy");
+            await navigationButton.click();
+
+            await driver.findElementByAutomationText("ShowActionBar");
+        });
+
+        it("should hide action bar by default", async () => {
+            const screenMatches =  await driver.compareScreen(`actionBarVisibility-never-default${imagePostFix}`, 5);
+            assert(screenMatches);
+        });
+
+        it("should not show action bar when shown by page", async () => {
+            const showActionBarButton = await driver.findElementByAutomationText("ShowActionBar");
+            showActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen(`actionBarVisibility-never-shown${imagePostFix}`, 5);
+            assert(screenMatches);
+        });
+
+        it("should not do anything when hidden action bar by page", async () => {
+            const hideActionBarButton = await driver.findElementByAutomationText("HideActionBar");
+            hideActionBarButton.click();
+
+            const screenMatches =  await driver.compareScreen(`actionBarVisibility-never-hidden${imagePostFix}`, 5);
+            assert(screenMatches);
+        });
+    });
+
     describe("actionBarVisibility 'auto' shows action bars based on page", async () => {
         before(async () => {
             driver = await createDriver();

e2e/renderer/package.json

@@ -24,25 +24,25 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "~7.0.0",
-    "@types/chai": "^4.0.2",
-    "@types/mocha": "^2.2.41",
-    "@types/node": "^7.0.5",
+    "@ngtools/webpack": "~7.0.0",
+    "@types/chai": "~4.1.3",
+    "@types/mocha": "~5.2.1",
+    "@types/node": "10.11.4",
     "babel-traverse": "6.25.0",
     "babel-types": "6.25.0",
     "babylon": "6.17.4",
     "chai": "~4.1.1",
     "chai-as-promised": "~7.1.1",
     "colors": "^1.1.2",
     "lazy": "1.0.11",
-    "mocha": "~3.5.0",
-    "mocha-junit-reporter": "^1.13.0",
-    "mocha-multi": "^0.11.0",
+    "mocha": "~5.1.0",
+    "mocha-junit-reporter": "~1.17.0",
+    "mocha-multi": "~1.0.0",
     "nativescript-dev-appium": "next",
     "nativescript-dev-typescript": "~0.7.1",
     "nativescript-dev-webpack": "next",
     "tslib": "^1.7.1",
-    "typescript": "~3.1.1",
-    "@ngtools/webpack": "~7.0.0"
+    "typescript": "~3.1.1"
   },
   "scripts": {
     "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",

nativescript-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-angular",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "An Angular renderer that lets you build mobile apps with NativeScript.",
   "homepage": "https://www.nativescript.org/",
   "bugs": "https://github.com/NativeScript/nativescript-angular/issues",

nativescript-angular/router/ns-empty-outlet.component.ts

@@ -1,15 +1,23 @@
-import { Component } from "@angular/core";
+import { Component, ViewChild } from "@angular/core";
 import { Page } from "tns-core-modules/ui/page";
+import { PageRouterOutlet } from "./page-router-outlet";
 @Component({
     // tslint:disable-next-line:component-selector
     selector: "ns-empty-outlet",
     moduleId: module.id,
     template: "<page-router-outlet isEmptyOutlet='true'></page-router-outlet>"
 })
 export class NSEmptyOutletComponent {
+    @ViewChild(PageRouterOutlet) pageRouterOutlet: PageRouterOutlet;
     constructor(private page: Page) {
         if (this.page) {
             this.page.actionBarHidden = true;
+
+            this.page.on("loaded", () => {
+                if (this.pageRouterOutlet && this.page.frame) {
+                    this.pageRouterOutlet.setActionBarVisibility(this.page.frame.actionBarVisibility);
+                }
+            });
         }
     }
 }

nativescript-angular/router/ns-location-strategy.ts

@@ -25,6 +25,7 @@ export class Outlet {
     path: string;
     pathByOutlets: string;
     states: Array<LocationState> = [];
+    isNSEmptyOutlet: boolean;
 
     // Used in reuse-strategy by its children to determine if they should be detached too.
     shouldDetach: boolean = true;

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

@@ -280,6 +280,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
             return;
         }
 
+        this.outlet.isNSEmptyOutlet = this.isEmptyOutlet;
         this.locationStrategy.updateOutletFrame(this.outlet, this.frame);
 
         if (this.outlet && this.outlet.isPageNavigationBack) {

nativescript-angular/router/router-extensions.ts

@@ -93,22 +93,24 @@ export class RouterExtensions {
         const outletsToBack: Array<Outlet> = [];
         const rootRoute: ActivatedRoute = this.router.routerState.root;
         let outlets = options.outlets;
-        let relativeRoute = options.relativeTo;
+        let relativeRoute = options.relativeTo || rootRoute;
 
-        if (!outlets && relativeRoute) {
-            outlets = [relativeRoute.outlet];
-            relativeRoute = relativeRoute.parent || rootRoute;
-        } else if (!relativeRoute) {
-            relativeRoute = rootRoute;
+        const relativeRouteOutlet = this.findOutletByRoute(relativeRoute);
+        const isNSEmptyOutlet = relativeRouteOutlet && relativeRouteOutlet.isNSEmptyOutlet;
+
+        // Lazy named outlet has added 'primary' inner NSEmptyOutlet child.
+        // Take parent route when `relativeTo` option points to the outer named outlet.
+        if (isNSEmptyOutlet && relativeRoute.outlet !== "primary") {
+            relativeRoute = relativeRoute.parent || relativeRoute;
         }
 
-        for (let index = 0; index < relativeRoute.children.length; index++) {
-            const currentRoute = relativeRoute.children[index];
+        const routesToMatch = outlets ? relativeRoute.children : [relativeRoute];
+        outlets = outlets || [relativeRoute.outlet];
 
+        for (let index = 0; index < routesToMatch.length; index++) {
+            const currentRoute = routesToMatch[index];
             if (outlets.some(currentOutlet => currentOutlet === currentRoute.outlet)) {
-                const currentRouteSnapshop = findTopActivatedRouteNodeForOutlet(currentRoute.snapshot);
-                const outletKey = this.locationStrategy.getRouteFullPath(currentRouteSnapshop);
-                let outlet = this.locationStrategy.findOutletByKey(outletKey);
+                const outlet = this.findOutletByRoute(currentRoute);
 
                 if (outlet) {
                     outletsToBack.push(outlet);
@@ -118,4 +120,14 @@ export class RouterExtensions {
 
         return { outletsToBack: outletsToBack, outlets: outlets };
     }
+
+    private findOutletByRoute(currentRoute: ActivatedRoute): Outlet {
+        let outlet;
+
+        const currentRouteSnapshop = findTopActivatedRouteNodeForOutlet(currentRoute.snapshot);
+        const outletKey = this.locationStrategy.getRouteFullPath(currentRouteSnapshop);
+        outlet = this.locationStrategy.findOutletByKey(outletKey);
+
+        return outlet;
+    }
 }