fix(router): link active directive (#2225)

Author: NathanWalker

Diff for: e2e/animation-examples/tsconfig.tns.json

@@ -35,18 +35,15 @@ export class ModalContentComponent {
     }
 }
 
-const TEMPLATE = `
-<GridLayout rows="auto, auto, *">
-    <Button text="show component" (tap)="showModal()"></Button>
-    <Button text="show component (async)" (tap)="showModalAsync()" row="1"></Button>
-    <Label [text]="'RESULT: ' + result" row="2" margin="12"></Label>
-</GridLayout>
-`;
-
 @Component({
     selector: "modal-test",
-    providers: [ModalDialogService],
-    template: TEMPLATE
+    template: `
+    <GridLayout rows="auto, auto, *">
+        <Button text="show component" (tap)="showModal()"></Button>
+        <Button text="show component (async)" (tap)="showModalAsync()" row="1"></Button>
+        <Label [text]="'RESULT: ' + result" row="2" margin="12"></Label>
+    </GridLayout>
+    `
 })
 export class ModalTestComponent {
     public result: string = "---";
@@ -75,7 +72,13 @@ export class ModalTestComponent {
 @Component({
     selector: "modal-test-on-push",
     changeDetection: ChangeDetectionStrategy.OnPush,
-    template: TEMPLATE
+    template: `
+    <GridLayout rows="auto, auto, *">
+        <Button text="show component" (tap)="showModal()"></Button>
+        <Button text="show component (async)" (tap)="showModalAsync()" row="1"></Button>
+        <Label [text]="'RESULT: ' + result" row="2" margin="12"></Label>
+    </GridLayout>
+    `
 })
 export class ModalTestWithPushStrategyComponent {
     public result: string = "---";

Diff for: e2e/tests-app-ng/app/modal/modal-dialogs/modal-dialog.component.ts

@@ -9,7 +9,7 @@
       "version": "6.5.2"
     },
     "tns-android": {
-      "version": "6.5.0"
+      "version": "6.5.3"
     }
   },
   "dependencies": {
@@ -37,11 +37,11 @@
     "codelyzer": "^5.1.0",
     "filewalker": "^0.1.3",
     "lazy": "1.0.11",
-    "@nativescript/webpack": "rc",
+    "@nativescript/webpack": "~2.1.1",
     "typescript": "~3.9.0"
   },
   "scripts": {
-    "clean": "npx rimraf hooks node_modules platforms package-lock.json",
+    "clean": "npx rimraf hooks node_modules platforms package-lock.json webpack.config.js && npm i",
     "setup": "cd ../../nativescript-angular && npm run prep.apps && cd ../e2e/tests-app-ng && npm run clean",
     "ngcc": "ngcc --properties es2015 module main --first-only",
     "postinstall": "npm run ngcc",

Diff for: e2e/tests-app-ng/package.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
-      "module": "esnext",
+      "module": "ESNext",
       "target": "es2015",
+      "moduleResolution": "node",
       "experimentalDecorators": true,
       "emitDecoratorMetadata": true,
       "noEmitHelpers": true,
@@ -20,6 +21,7 @@
       }
   },
   "files": [
+    "./references.d.ts",
     "./app/main.ts"
   ],
   "exclude": [

Diff for: e2e/tests-app-ng/tsconfig.json

@@ -104,7 +104,13 @@ export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentIni
 		if (this.active !== hasActiveLinks) {
 			const currentUrlTree = this.router.parseUrl(this.router.url);
 			const isActiveLinks = this.reduceList(currentUrlTree, this.links);
-			this.classes.forEach((c) => this.renderer.setStyle(this.element.nativeElement, c, isActiveLinks));
+			this.classes.forEach((c) => {
+        if (isActiveLinks) {
+          this.renderer.removeClass(this.element.nativeElement, c);
+        } else {
+          this.renderer.addClass(this.element.nativeElement, c);
+        }
+      });
 		}
 		Promise.resolve(hasActiveLinks).then((active) => (this.active = active));
 	}

Diff for: e2e/tests-app-ng/tsconfig.tns.json

@@ -1,4 +1,4 @@
-import { Directive, HostListener, Input } from '@angular/core';
+import { Directive, Input, ElementRef, NgZone } from '@angular/core';
 import { NavigationExtras } from '@angular/router';
 import { ActivatedRoute, Router, UrlTree } from '@angular/router';
 import { NavigationTransition } from '@nativescript/core';
@@ -52,7 +52,30 @@ export class NSRouterLink {
 
 	private commands: any[] = [];
 
-	constructor(private router: Router, private navigator: RouterExtensions, private route: ActivatedRoute) {}
+	constructor(private ngZone: NgZone, private router: Router, private navigator: RouterExtensions, private route: ActivatedRoute, private el: ElementRef) {
+  }
+
+  ngAfterViewInit() {
+    this.el.nativeElement.on('tap', () => {
+      this.ngZone.run(() => {
+        if (NativeScriptDebug.isLogEnabled()) {
+          NativeScriptDebug.routerLog(`nsRouterLink.tapped: ${this.commands} ` + `clear: ${this.clearHistory} ` + `transition: ${JSON.stringify(this.pageTransition)} ` + `duration: ${this.pageTransitionDuration}`);
+        }
+    
+        const extras = this.getExtras();
+        // this.navigator.navigateByUrl(this.urlTree, extras);
+        this.navigator.navigate(this.commands, {
+          ...extras,
+          relativeTo: this.route,
+          queryParams: this.queryParams,
+          fragment: this.fragment,
+          preserveQueryParams: attrBoolValue(this.preserveQueryParams),
+          queryParamsHandling: this.queryParamsHandling,
+          preserveFragment: attrBoolValue(this.preserveFragment),
+        });
+      });
+    });
+  }
 
 	@Input('nsRouterLink')
 	set params(data: any[] | string) {
@@ -63,16 +86,6 @@ export class NSRouterLink {
 		}
 	}
 
-	@HostListener('tap')
-	onTap() {
-		if (NativeScriptDebug.isLogEnabled()) {
-			NativeScriptDebug.routerLog(`nsRouterLink.tapped: ${this.commands} ` + `clear: ${this.clearHistory} ` + `transition: ${JSON.stringify(this.pageTransition)} ` + `duration: ${this.pageTransitionDuration}`);
-		}
-
-		const extras = this.getExtras();
-		this.navigator.navigateByUrl(this.urlTree, extras);
-	}
-
 	private getExtras(): NavigationExtras & NavigationOptions {
 		const transition = this.getTransition();
 		return {