Fix navigate with clearHistory to a lazy loaded module

nativescript-angular/router.ts

@@ -1,6 +1,7 @@
-import { NgModule, ModuleWithProviders, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NgModule, ModuleWithProviders, NO_ERRORS_SCHEMA, Optional, SkipSelf } from "@angular/core";
 import { RouterModule, Routes, ExtraOptions } from "@angular/router";
 import { LocationStrategy, PlatformLocation } from "@angular/common";
+import { Frame } from "ui/frame";
 import { NSRouterLink } from "./router/ns-router-link";
 import { NSRouterLinkActive } from "./router/ns-router-link-active";
 import { PageRouterOutlet } from "./router/page-router-outlet";
@@ -21,7 +22,11 @@ export type LocationState = LocationState;
         PageRouterOutlet
     ],
     providers: [
-        NSLocationStrategy,
+        {
+            provide: NSLocationStrategy,
+            useFactory: provideLocationStrategy,
+            deps: [[NSLocationStrategy, new Optional(), new SkipSelf()], Frame]
+        },
         { provide: LocationStrategy, useExisting: NSLocationStrategy },
         NativescriptPlatformLocation,
         { provide: PlatformLocation, useClass: NativescriptPlatformLocation },
@@ -48,3 +53,7 @@ export class NativeScriptRouterModule {
         return RouterModule.forChild(routes);
     }
 }
+
+export function provideLocationStrategy(locationStrategy: NSLocationStrategy, frame: Frame): NSLocationStrategy {
+    return locationStrategy ? locationStrategy : new NSLocationStrategy(frame);
+}

tests/app/first.component.ts

@@ -1,5 +1,6 @@
 import { Router, ActivatedRoute } from '@angular/router';
 import { Component, Inject } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
 import { HOOKS_LOG, BaseComponent } from "./base.component";
 import { BehaviorSubject } from "rxjs/BehaviorSubject";
 
@@ -8,22 +9,34 @@ import { BehaviorSubject } from "rxjs/BehaviorSubject";
     template: `
 <StackLayout>
     <Label [automationText]="'first-' + id" [text]="'First: ' + id"></Label>
-    <Button [automationText]="'first-navigate-' + id" text="Go to second" (tap)="gotoSecond()"></Button>
-    <TextView [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></TextView>
-    <TextView [text]="'hooks-log-' + id"></TextView>
+    <StackLayout orientation="horizontal">
+        <Button [automationText]="'first-navigate-' + id" text="Go to second" (tap)="gotoSecond()"></Button>
+        <Button [automationText]="'first-navigate-clear-history-' + id" text="With clear history"
+                (tap)="gotoSecondAndClearHistory()">
+        </Button>
+    </StackLayout>
+    <Label [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></Label>
+    <Label [text]="'hooks-log-' + id"></Label>
 </StackLayout>
     `
 })
 export class FirstComponent extends BaseComponent {
     protected name = "first";
     public id: string = "";
 
-    constructor(private router: Router, private routeData: ActivatedRoute, @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>) {
+    constructor(private routerExtensions: RouterExtensions,
+                private routeData: ActivatedRoute,
+                @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>
+    ) {
         super(hooksLog);
         this.id = routeData.snapshot.params["id"];
     }
 
     gotoSecond() {
-        this.router.navigateByUrl("/second/" + this.id);
+        this.routerExtensions.navigateByUrl("/second/" + this.id);
+    }
+
+    gotoSecondAndClearHistory() {
+        this.routerExtensions.navigateByUrl("/second/" + this.id, { clearHistory: true })
     }
 }

tests/app/second.component.ts

@@ -1,6 +1,7 @@
 import { Router, ActivatedRoute } from "@angular/router";
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { Location } from "@angular/common";
+import { RouterExtensions } from "nativescript-angular/router";
 import { HOOKS_LOG, BaseComponent } from "./base.component";
 import { BehaviorSubject } from "rxjs/BehaviorSubject";
 
@@ -10,20 +11,31 @@ import { BehaviorSubject } from "rxjs/BehaviorSubject";
 <StackLayout>
     <Label [automationText]="'second-' + id" [text]="'Second: ' + id"></Label>
     <Button [automationText]="'second-navigate-back-' + id" text="Go to first" (tap)="goBack()"></Button>
-    <TextView [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></TextView>
-    <TextView [text]="'hooks-log-' + id"></TextView>
+    <Label [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></Label>
+    <Label [text]="'hooks-log-' + id"></Label>
+    <Label [automationText]="'router-location-strategy-states-' + id" [text]="routerLocationStrategystates"></Label>
 </StackLayout>
     `
 })
-export class SecondComponent extends BaseComponent {
+export class SecondComponent extends BaseComponent implements OnInit {
     protected name = "second";
     public id: string = "";
+    protected routerLocationStrategystates = "";
 
-    constructor(private router: Router, private location: Location, private routeData: ActivatedRoute, @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>) {
+    constructor(private routerExtensions: RouterExtensions,
+                private location: Location,
+                private routeData: ActivatedRoute,
+                @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>
+    ) {
         super(hooksLog);
         this.id = routeData.snapshot.params["id"];
     }
 
+    ngOnInit() {
+        super.ngOnInit();
+        this.routerLocationStrategystates = this.routerExtensions.locationStrategy._getStates().map(state => state.url).join(",");
+    }
+
     goBack() {
         this.location.back();
     }

tests/e2e-tests/lazy-load-routing.js

@@ -38,7 +38,9 @@ describe("lazy load routing", function () {
             .tap()
             .elementByAccessibilityId("second-lazy-load")
                 .should.eventually.exist
-            .text().should.eventually.equal("Second: lazy-load")
+                .text().should.eventually.equal("Second: lazy-load")
+            .elementByAccessibilityId("router-location-strategy-states-lazy-load")
+                .text().should.eventually.equal("/first/lazy-load,/second/lazy-load")
             .elementByAccessibilityId("second-navigate-back-lazy-load")
                 .should.eventually.exist
             .tap()
@@ -48,4 +50,17 @@ describe("lazy load routing", function () {
             .elementByAccessibilityId("hooks-log-lazy-load")
                 .text().should.eventually.equal(expectedHookLog)
     });
+
+    it("navigates and clear history", function() {
+        return driver
+            .waitForElementByAccessibilityId("first-navigate-lazy-load", 300000)
+            .elementByAccessibilityId("first-navigate-clear-history-lazy-load")
+                .should.eventually.exist
+            .tap()
+            .elementByAccessibilityId("second-lazy-load")
+                .should.eventually.exist
+                .text().should.eventually.equal("Second: lazy-load")
+            .elementByAccessibilityId("router-location-strategy-states-lazy-load")
+                .text().should.eventually.equal("/second/lazy-load")
+    });
 });