From ecfc7898eecf010aebce0ccbb1ea55f9342261c3 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 13:00:43 -0300 Subject: [PATCH 1/9] fix(router): query params not being saved --- .../router/ns-location-strategy.ts | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 92da486e7..d65abc976 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -85,6 +85,7 @@ const defaultNavOptions: NavigationOptions = { }; export interface LocationState { + queryParams: any; segmentGroup: UrlSegmentGroup; isRootSegmentGroup: boolean; isPageNavigation: boolean; @@ -131,6 +132,7 @@ export class NSLocationStrategy extends LocationStrategy { } const urlSerializer = new DefaultUrlSerializer(); + tree.queryParams = state.queryParams; const url = urlSerializer.serialize(tree); if (isLogEnabled()) { routerLog("NSLocationStrategy.path(): " + url); @@ -165,7 +167,7 @@ export class NSLocationStrategy extends LocationStrategy { const outletKey = this.getOutletKey(this.getSegmentGroupFullPath(segmentGroup), "primary"); const outlet = this.findOutlet(outletKey); - if (outlet && this.updateStates(outlet, segmentGroup)) { + if (outlet && this.updateStates(outlet, segmentGroup, this.currentUrlTree.queryParams)) { this.currentOutlet = outlet; // If states updated } else if (!outlet) { const rootOutlet = this.createOutlet("primary", null, segmentGroup, null); @@ -197,15 +199,15 @@ export class NSLocationStrategy extends LocationStrategy { const containsLastState = outlet && outlet.containsTopState(currentSegmentGroup.toString()); if (!outlet) { // tslint:disable-next-line:max-line-length - outlet = this.createOutlet(outletKey, outletPath, currentSegmentGroup, parentOutlet, this._modalNavigationDepth); + outlet = this.createOutlet(outletKey, outletPath, currentSegmentGroup, parentOutlet, this._modalNavigationDepth, this.currentUrlTree.queryParams); this.currentOutlet = outlet; } else if (this._modalNavigationDepth > 0 && outlet.showingModal && !containsLastState) { // Navigation inside modal view. - this.upsertModalOutlet(outlet, currentSegmentGroup); + this.upsertModalOutlet(outlet, currentSegmentGroup, this.currentUrlTree.queryParams); } else { outlet.parent = parentOutlet; - if (this.updateStates(outlet, currentSegmentGroup)) { + if (this.updateStates(outlet, currentSegmentGroup, this.currentUrlTree.queryParams)) { this.currentOutlet = outlet; // If states updated } } @@ -604,7 +606,7 @@ export class NSLocationStrategy extends LocationStrategy { return outlet; } - private updateStates(outlet: Outlet, currentSegmentGroup: UrlSegmentGroup): boolean { + private updateStates(outlet: Outlet, currentSegmentGroup: UrlSegmentGroup, queryParams: any): boolean { const isNewPage = outlet.states.length === 0; const lastState = outlet.states[outlet.states.length - 1]; const equalStateUrls = outlet.containsTopState(currentSegmentGroup.toString()); @@ -612,7 +614,8 @@ export class NSLocationStrategy extends LocationStrategy { const locationState: LocationState = { segmentGroup: currentSegmentGroup, isRootSegmentGroup: false, - isPageNavigation: isNewPage + isPageNavigation: isNewPage, + queryParams }; if (!lastState || !equalStateUrls) { @@ -645,14 +648,15 @@ export class NSLocationStrategy extends LocationStrategy { } // tslint:disable-next-line:max-line-length - private createOutlet(outletKey: string, path: string, segmentGroup: any, parent: Outlet, modalNavigation?: number): Outlet { + private createOutlet(outletKey: string, path: string, segmentGroup: any, parent: Outlet, modalNavigation?: number, queryParams: any = {}): Outlet { const pathByOutlets = this.getPathByOutlets(segmentGroup); const newOutlet = new Outlet(outletKey, path, pathByOutlets, modalNavigation); const locationState: LocationState = { segmentGroup: segmentGroup, isRootSegmentGroup: false, - isPageNavigation: true // It is a new OutletNode. + isPageNavigation: true, // It is a new OutletNode. + queryParams }; newOutlet.states = [locationState]; @@ -719,7 +723,7 @@ export class NSLocationStrategy extends LocationStrategy { } } - private upsertModalOutlet(parentOutlet: Outlet, segmentedGroup: UrlSegmentGroup) { + private upsertModalOutlet(parentOutlet: Outlet, segmentedGroup: UrlSegmentGroup, queryParams: any) { let currentModalOutlet = this.findOutletByModal(this._modalNavigationDepth); // We want to treat every p-r-o as a standalone Outlet. @@ -734,9 +738,9 @@ export class NSLocationStrategy extends LocationStrategy { const outletPath = parentOutlet.peekState().segmentGroup.toString(); const outletKey = this.getOutletKey(outletPath, outletName); // tslint:disable-next-line:max-line-length - currentModalOutlet = this.createOutlet(outletKey, outletPath, segmentedGroup, parentOutlet, this._modalNavigationDepth); + currentModalOutlet = this.createOutlet(outletKey, outletPath, segmentedGroup, parentOutlet, this._modalNavigationDepth, queryParams); this.currentOutlet = currentModalOutlet; - } else if (this.updateStates(currentModalOutlet, segmentedGroup)) { + } else if (this.updateStates(currentModalOutlet, segmentedGroup, queryParams)) { this.currentOutlet = currentModalOutlet; // If states updated } } From c962f018374a394308b70831ff9565c9aee6a2c0 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 13:00:50 -0300 Subject: [PATCH 2/9] test pages --- e2e/router/app/first/first.component.ts | 11 ++++++++++- e2e/router/app/second/second.component.ts | 11 ++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/e2e/router/app/first/first.component.ts b/e2e/router/app/first/first.component.ts index f76f54f91..837642cb9 100644 --- a/e2e/router/app/first/first.component.ts +++ b/e2e/router/app/first/first.component.ts @@ -3,6 +3,8 @@ import { RouterExtensions } from "nativescript-angular/router"; import { Page } from "tns-core-modules/ui/page"; import { CounterService } from "../counter.service"; +import { ActivatedRoute } from "@angular/router"; +import { Subscription } from "rxjs"; @Component({ selector: "first", @@ -10,7 +12,7 @@ import { CounterService } from "../counter.service"; - + @@ -26,9 +28,11 @@ import { CounterService } from "../counter.service"; export class FirstComponent implements OnInit, OnDestroy, DoCheck { public message: string = ""; public doCheckCount: number = 0; + sub: Subscription; constructor( private routerExt: RouterExtensions, + private route: ActivatedRoute, public service: CounterService, page: Page) { @@ -37,9 +41,14 @@ export class FirstComponent implements OnInit, OnDestroy, DoCheck { ngOnInit() { console.log("FirstComponent - ngOnInit()"); + this.sub = this.route.queryParams.subscribe((params) =>{ + console.log("FIRST PARAMS:"); + console.log(params); + }); } ngOnDestroy() { + this.sub.unsubscribe(); console.log("FirstComponent - ngOnDestroy()"); } diff --git a/e2e/router/app/second/second.component.ts b/e2e/router/app/second/second.component.ts index fbdaeaee5..7093b4fbe 100644 --- a/e2e/router/app/second/second.component.ts +++ b/e2e/router/app/second/second.component.ts @@ -3,7 +3,7 @@ import { ActivatedRoute } from "@angular/router"; import { RouterExtensions } from "nativescript-angular/router"; import { Page } from "tns-core-modules/ui/page"; -import { Observable } from "rxjs"; +import { Observable, Subscription } from "rxjs"; import { map } from "rxjs/operators"; import { CounterService } from "../counter.service"; @@ -36,6 +36,7 @@ import { CounterService } from "../counter.service"; export class SecondComponent implements OnInit, OnDestroy { public depth$: Observable; public nextDepth$: Observable; + sub: Subscription; constructor( private routerExt: RouterExtensions, @@ -48,10 +49,18 @@ export class SecondComponent implements OnInit, OnDestroy { } ngOnInit() { + this.sub = this.route.queryParams.subscribe((params) => { + console.log(""); + console.log(""); + console.log(params); + console.log(""); + console.log(""); + }); console.log("SecondComponent - ngOnInit()"); } ngOnDestroy() { + this.sub.unsubscribe(); console.log("SecondComponent - ngOnDestroy()"); } From 02f543ae9da3c0a221a315539e1eb0bc6e6cf39b Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 13:53:41 -0300 Subject: [PATCH 3/9] chore: update router tests --- tests/app/tests/ns-location-strategy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/app/tests/ns-location-strategy.ts b/tests/app/tests/ns-location-strategy.ts index 1c1ee221d..dae6e6731 100644 --- a/tests/app/tests/ns-location-strategy.ts +++ b/tests/app/tests/ns-location-strategy.ts @@ -135,6 +135,7 @@ function createState( segmentGroup: isRoot ? stateUrlTree.root : rootOutlets[outletName], isPageNavigation: isPageNav, isRootSegmentGroup: isRoot, + queryParams: stateUrlTree.queryParams }; } From faf5e9ea1681a07f573e893cdd94f8634262b9e0 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 13:59:39 -0300 Subject: [PATCH 4/9] chore: update typings --- nativescript-angular/router/ns-location-strategy.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index d65abc976..31bdb4d36 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -1,6 +1,6 @@ import { Injectable } from "@angular/core"; import { LocationStrategy } from "@angular/common"; -import { DefaultUrlSerializer, UrlSegmentGroup, UrlTree, ActivatedRouteSnapshot } from "@angular/router"; +import { DefaultUrlSerializer, UrlSegmentGroup, UrlTree, ActivatedRouteSnapshot, Params } from "@angular/router"; import { routerLog, routerError, isLogEnabled } from "../trace"; import { NavigationTransition, Frame } from "tns-core-modules/ui/frame"; import { isPresent } from "../lang-facade"; @@ -85,7 +85,7 @@ const defaultNavOptions: NavigationOptions = { }; export interface LocationState { - queryParams: any; + queryParams: Params; segmentGroup: UrlSegmentGroup; isRootSegmentGroup: boolean; isPageNavigation: boolean; @@ -606,7 +606,7 @@ export class NSLocationStrategy extends LocationStrategy { return outlet; } - private updateStates(outlet: Outlet, currentSegmentGroup: UrlSegmentGroup, queryParams: any): boolean { + private updateStates(outlet: Outlet, currentSegmentGroup: UrlSegmentGroup, queryParams: Params): boolean { const isNewPage = outlet.states.length === 0; const lastState = outlet.states[outlet.states.length - 1]; const equalStateUrls = outlet.containsTopState(currentSegmentGroup.toString()); @@ -648,7 +648,7 @@ export class NSLocationStrategy extends LocationStrategy { } // tslint:disable-next-line:max-line-length - private createOutlet(outletKey: string, path: string, segmentGroup: any, parent: Outlet, modalNavigation?: number, queryParams: any = {}): Outlet { + private createOutlet(outletKey: string, path: string, segmentGroup: any, parent: Outlet, modalNavigation?: number, queryParams: Params = {}): Outlet { const pathByOutlets = this.getPathByOutlets(segmentGroup); const newOutlet = new Outlet(outletKey, path, pathByOutlets, modalNavigation); @@ -723,7 +723,7 @@ export class NSLocationStrategy extends LocationStrategy { } } - private upsertModalOutlet(parentOutlet: Outlet, segmentedGroup: UrlSegmentGroup, queryParams: any) { + private upsertModalOutlet(parentOutlet: Outlet, segmentedGroup: UrlSegmentGroup, queryParams: Params) { let currentModalOutlet = this.findOutletByModal(this._modalNavigationDepth); // We want to treat every p-r-o as a standalone Outlet. From 32ce30ac9b328ea2a2185df006bf57c3b93958c6 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 14:18:25 -0300 Subject: [PATCH 5/9] chore: add query params back test --- tests/app/tests/ns-location-strategy.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/tests/app/tests/ns-location-strategy.ts b/tests/app/tests/ns-location-strategy.ts index dae6e6731..53b32125d 100644 --- a/tests/app/tests/ns-location-strategy.ts +++ b/tests/app/tests/ns-location-strategy.ts @@ -270,6 +270,22 @@ describe("NSLocationStrategy", () => { assert.equal(popCount, 0); // no onPopState when replacing }); + it("back() preserves query params", () => { + const { strategy } = initStrategy("/?param=1"); + let popCount = 0; + strategy.onPopState(() => { + popCount++; + }); + + strategy.pushState(null, "test", "/test", null); + assert.equal(strategy.path(), "/test"); + assert.equal(popCount, 0); + + strategy.back(); + assert.equal(strategy.path(), "/?param=1"); + assert.equal(popCount, 1); + }); + it("pushState() with page navigation", () => { const { strategy } = initStrategy("/"); const outletName = "primary"; From 47d61cc5d601d85a1ab00634715d1d6bf9191b71 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 16:00:09 -0300 Subject: [PATCH 6/9] add params to primary outlet and always make copy --- nativescript-angular/router/ns-location-strategy.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 31bdb4d36..95be39ab5 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -170,7 +170,7 @@ export class NSLocationStrategy extends LocationStrategy { if (outlet && this.updateStates(outlet, segmentGroup, this.currentUrlTree.queryParams)) { this.currentOutlet = outlet; // If states updated } else if (!outlet) { - const rootOutlet = this.createOutlet("primary", null, segmentGroup, null); + const rootOutlet = this.createOutlet("primary", null, segmentGroup, null, null, this.currentUrlTree.queryParams); this.currentOutlet = rootOutlet; } @@ -615,7 +615,7 @@ export class NSLocationStrategy extends LocationStrategy { segmentGroup: currentSegmentGroup, isRootSegmentGroup: false, isPageNavigation: isNewPage, - queryParams + queryParams: {...queryParams} }; if (!lastState || !equalStateUrls) { @@ -656,7 +656,7 @@ export class NSLocationStrategy extends LocationStrategy { segmentGroup: segmentGroup, isRootSegmentGroup: false, isPageNavigation: true, // It is a new OutletNode. - queryParams + queryParams: {...queryParams} }; newOutlet.states = [locationState]; From 0bc1bdada90fed7b6ef8087da43f529207adfafe Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 16:00:25 -0300 Subject: [PATCH 7/9] chore: thorough test case --- tests/app/tests/ns-location-strategy.ts | 26 ++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/tests/app/tests/ns-location-strategy.ts b/tests/app/tests/ns-location-strategy.ts index 53b32125d..73e1b65fb 100644 --- a/tests/app/tests/ns-location-strategy.ts +++ b/tests/app/tests/ns-location-strategy.ts @@ -281,9 +281,33 @@ describe("NSLocationStrategy", () => { assert.equal(strategy.path(), "/test"); assert.equal(popCount, 0); + strategy.pushState(null, "test2", "/test2?param2=2", null); + assert.equal(strategy.path(), "/test2?param2=2"); + assert.equal(popCount, 0); + + strategy.pushState(null, "test3", "/test3?param3=3", null); + assert.equal(strategy.path(), "/test3?param3=3"); + assert.equal(popCount, 0); + + strategy.pushState(null, "test4", "/test4", null); + assert.equal(strategy.path(), "/test4"); + assert.equal(popCount, 0); + strategy.back(); - assert.equal(strategy.path(), "/?param=1"); + assert.equal(strategy.path(), "/test3?param3=3"); assert.equal(popCount, 1); + + strategy.back(); + assert.equal(strategy.path(), "/test2?param2=2"); + assert.equal(popCount, 2); + + strategy.back(); + assert.equal(strategy.path(), "/test"); + assert.equal(popCount, 3); + + strategy.back(); + assert.equal(strategy.path(), "/?param=1"); + assert.equal(popCount, 4); }); it("pushState() with page navigation", () => { From a7de68f62ecf82291b65d8b987c60ada8d6911c0 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Mon, 11 Nov 2019 16:08:53 -0300 Subject: [PATCH 8/9] chore: fix lint --- nativescript-angular/router/ns-location-strategy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 95be39ab5..ce058bcec 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -170,6 +170,7 @@ export class NSLocationStrategy extends LocationStrategy { if (outlet && this.updateStates(outlet, segmentGroup, this.currentUrlTree.queryParams)) { this.currentOutlet = outlet; // If states updated } else if (!outlet) { + // tslint:disable-next-line:max-line-length const rootOutlet = this.createOutlet("primary", null, segmentGroup, null, null, this.currentUrlTree.queryParams); this.currentOutlet = rootOutlet; } From ff9fb1fdad0ca9b38e54bd2e397f4846b7474a3a Mon Sep 17 00:00:00 2001 From: Stoyan Stratev Date: Fri, 3 Jan 2020 11:42:38 +0200 Subject: [PATCH 9/9] update typedoc version causes issues with `npm install` --- nativescript-angular/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 4e0527624..eedec2569 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -70,6 +70,6 @@ "typescript": "~3.5.3", "zone.js": "^0.9.1", "nativescript-typedoc-theme": "git://github.com/NativeScript/nativescript-typedoc-theme.git#master", - "typedoc": "^0.13.0" + "typedoc": "0.15.0" } }